tips 前端背景与元素的透明跟模糊

tips 前端背景与元素的透明和模糊

碰到好几次这样的情况了:
一个带点儿文艺效果背景图片模糊而一行别致的文字清晰的悬浮在背景上(口胡,加点美好的想象,生活会更美好)

第一反应是 this is easy. cause i know css have attribute like(blur,opacity)
好像很容易,顶多再加点儿

1 -moz-opacity:0.5;
2 filter:alpha(opacity=50); /* 针对 IE8 以及更早的版本 */

3 -webkit-filter: blur(3px); /* Chrome, Opera */
4 -moz-filter: blur(3px);
5 -ms-filter: blur(3px);

like this. looks like enough!(如果感兴趣或者更多要求的话,我还可以去做一下更多的css滤镜效果像阴影,过渡之类的) 总之用的很开心.
可是很快就发现了一个问题
图上的文字的文字也模糊了 (why ?)原因并不难

<div style="background-image:url(xxx.jpg)">
    <p>xxxxxxxxxxxx</p>
</div>

因为它是它的子元素,第一次我试过用z-index将它定位在不同的层上,可是失败了,(因为它是它的子元素,很重要所以说两遍>_<)
不过我很快就解决了
既然都用了z-index,为何不索性只使用position了(w3c的设定毫无疑问是严谨的,我更省心了一步)
所以代码干脆这样

<div style="background-image:url(xxx.jpg)"></div>
<p>xxxxxxxxxxxx</p>

或者这样

<div>
    <img src="xx.jpg">
    <p>xxxxxxxxxxx</p>
</div>

关于定位的事情请交给定位去解决吧,这才是正确的思维方式。

顺便贴下我这部分代码片段:

 1 <div class="head_img"></div>
 2 <div class="row">
 3   <div class="col-xs-2 goto_bottom" style="left:35%;">
 4     <p class="color_white1 font_15_bold" style="margin-bottom:0px;">关注</p>
 5     <p class="color_white1 font_15 ">13</p>
 6   </div>
 7   <div class="col-xs-2 padding_no goto_bottom" style="left:60%;" >
 8     <p class="color_white1 font_15_bold" style="margin-bottom:0px;">粉丝</p>
 9     <p class="color_white1 font_15">3232</p>
10    </div>
11 </div>

 1 .head_img{
 2   position: absolute; 
 3   width: 100%;height:100%;
 4   top: 0px;  left: 0px;  bottom: 0px;  right: 0px;
 5   background-image: url(../images/tao_5.jpg);
 6   background-size: cover;
 7        opacity:0.7;
 8   -moz-opacity:0.7;
 9   filter:alpha(opacity=70); /* 针对 IE8 以及更早的版本 */
10           filter:blur(3px);
11   -webkit-filter: blur(3px); /* Chrome, Opera */
12   -moz-filter: blur(3px);
13   -ms-filter: blur(3px);
14 }
15 
16 .goto_bottom{
17   position: absolute;
18   bottom: 0px;
19   opacity: 1;
20   -moz-opacity:1;
21   filter:alpha(opacity=100);
22 }

tips 前端 背景与元素的透明跟模糊

相关推荐

tips 前端背景与元素的透明跟模糊