tips front-end transparency and blur of background and elements_html/css

tips front-end transparency and blur of background and elements_html/css_WEB-ITnose

WBOY

Release： 2016-06-24 11:44:36

Original

1573 people have browsed it

I have encountered this situation several times:
A background image with a bit of literary and artistic effect is blurred and a line of unique text is clearly suspended on the background (slurred words, add some beautiful imagination, Life will be better)

The first reaction is this is easy. cause i know css have attribute like (blur, opacity)
It seems to be easy, at most add a little bit

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);

Copy after login

like this. looks like enough! (If you are interested or have more requests, I can also do more css filter effects like shadows, transitions, etc.) In short, it is very useful. Happy.
But I soon discovered a problem
The text on the picture was also blurred (why?) The reason is not difficult

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

Copy after login

Because it It is its child element. The first time I tried to use z-index to position it on a different layer, but it failed. (Because it is its child element, it is very important, so I say it twice>_<)
But I solved it quickly
Since z-index is used, why not just use position (the settings of w3c are undoubtedly rigorous, which saves me a step)
So The code simply looks like this

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

Copy after login

or like this

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

Copy after login

Please leave the positioning matters to the positioning, this is The right way of thinking.

By the way, I’ll post this part of my code:

 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>

Copy after login

 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 }

Copy after login