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 }
总之可以看到大致有这么几种解决方案
背景图片 background-img <div style="background-img:xx"> ...xxx... </div> 图片 然后position absolute覆盖 <div>
<img src="xx">
<div style="position:absolute;"> ...xxx... </div>
</div> 理论上margin-top 负值也可以做到(但有不在z轴上面的风险) 所以最后是这样的 <div style="background-img:xx"> </div> <div style="margin-top:-200px"> ...xxx... </div>
