如何模糊div並在其上顯示文字

如何模糊懸停上的div元素並在其上顯示文字。如何模糊div並在其上顯示文字

我做了直到模糊的部分，但我無法弄清楚如何顯示一個文本。我搜索過這個問題，但只針對images.My DIV瞭解決方案包含<h5>標籤不<img>標籤

.content34 { 
    height: 1em; 
    text-align: center; 
    width: 320px; 
    margin-top:25px; 
    margin-left: -55px; 
    position: inherit; 
    overflow: hidden; 
    cursor: pointer; 
} 
.txt{ 
    -webkit-transition: .4s ease-in-out opacity; 
    -moz-transition: .4s ease-in-out opacity; 
    -o-transition: .4s ease-in-out opacity; 
    transition: .4s ease-in-out opacity; 
} 
.txt :hover{ 
    opacity: 0.1; 
}

HTML代碼

<div style=" float: left;" class="txt"> 
    <h5 class='content34' style="float: left"> Lorem ipsum dolor sit amet, 
    consectetur adipiscing elit. Ut euismod, nulla a aliquet ultrices, 
    mauris turpis fermentum quam, vel varius dolor enim vitae lacus. Morbi 
    ac posuere orci. Aliquam erat volutpat. Pellentesque consequat dignissim 
    metus in accumsan. Maecenas sem augue, placerat commodo convallis non, 
     commodo vel elit. Vestibulum porttitor tortor molestie ligula varius 
    sed cursus arcu suscipit. Maecenas imperdiet laoreet suscipit. Donec 
    blandit est eget augue hendrerit venenatis. Nunc nibh ipsum, convallis 
    mattis iaculis at, luctus ac risus. Morbi commodo sollicitudin ipsum, 
    quis aliquam quam vestibulum at. 
    </h5> 
    <h4 style=" display: none">See 
    Message 
    </h4> 
</div>

我的問題是不能重複的CSS blur on background image but not on content。我想模糊我的內容，其中包含文本，並在其上顯示另一個文本

來源

2017-04-10 ani

發佈您的代碼。 –

發佈了代碼 – ani

@DaniP在將它標記爲重複之前，請先閱讀內容。我的問題不是那個。可能是重複的，但不是那個問題。 – ani

將div和文本放在一個共同的父級，將position: relative添加到父級，並絕對將文本放置在div上。

article { 
 
    display: inline-block; 
 
    position: relative; 
 
} 
 
div { 
 
    width: 560px; 
 
    height: 400px; 
 
    background: url('http://kenwheeler.github.io/slick/img/fonz1.png'); 
 
    filter: blur(5px); 
 
} 
 
h1 { 
 
    position: absolute; 
 
    top: 50%; left: 50%; 
 
    transform: translate(-50%,-50%); 
 
}

<article> 
 
    <div></div> 
 
    <h1>hello world</h1> 
 
</article>

來源

2017-04-10 20:38:43

我的div包含h5標籤。我想模糊它並在懸停時顯示其他文字 – ani

如何模糊div並在其上顯示文字

回答

相關問題