Tips front-end background and transparency and blur of elements, and tips front-end element blur

Tips front-end background and transparency and blur of elements, and tips front-end element blur

I encountered this situation several times:
A Blurred background image with some artistic effects and a line of special texts are clearly suspended on the background (Mouth Hu, some beautiful imagination, and life will be better)

The first response is this is easy. cause I know css have attribute like (blur, opacity)
It seems very easy. Add more at most.

1-moz-opacity: 0.5; 2 filter: alpha (opacity = 50);/* For IE8 and earlier versions */

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

Like this. looks like enough! (If you are interested or have more requirements, I can also do more css Filter effects, such as shadows and transitions.) In short, I am very happy.
But soon I found a problem.
The text on the graph is also blurred (why ?) The reason is not difficult.

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

Because it is its child element, I tried to use z-index to locate it on different layers for the first time, but it failed (because it is its child element, it is very important to say it twice >_<)
But I will solve it soon.
Since z-index is used, why not simply use position (w3c setting is undoubtedly rigorous, and I am more worried about it)
So the code is just like this

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

Or

<div>        <p>xxxxxxxxxxx</p></div>

Let us solve the positioning problem. This is the correct way of thinking.

 

By the way, paste 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; "> follow </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; "> fans </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 ); /* For IE8 and earlier versions */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}