html模糊透明,tips前端背景与元素的透明和模糊_html/css_WEB-ITnose

碰到好几次这样的情况了:

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

第一反应是 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 ?)原因并不难

xxxxxxxxxxxx

因为它是它的子元素,第一次我试过用z-index将它定位在不同的层上,可是失败了,(因为它是它的子元素,很重要所以说两遍>_不过我很快就解决了

既然都用了z-index,为何不索性只使用position了(w3c的设定毫无疑问是严谨的,我更省心了一步)

所以代码干脆这样

xxxxxxxxxxxx

或者这样

xxxxxxxxxxx

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

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

1

2

3

4

关注 5

13 6 7

8

粉丝 9

32321011

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 }

本条技术文章来源于互联网，如果无意侵犯您的权益请点击此处反馈版权投诉

本文系统来源：php中文网