Summary of daily css skills (1) -- Changes in background transparency do not affect the content. css Summary

Summary of daily css skills (1) -- Changes in background transparency do not affect the content. css Summary

When an error occurs at the beginning, the content will be affected by the change in background transparency:

Code:

<! DOCTYPE html> 
Solution 1:
Add a div to div. wrap. As a mask, you can set a change style for its transparency and make the content absolutely positioned relative to the wrap. Remember to set a relative position for the wrap !!
<! DOCTYPE html> 
Final effect:

Solution 2:
Use rgba () to set the background color and transparency of the background.
    <style>        div{            width:300px;            height: 300px;            margin: 50px auto;            line-height: 300px;            text-align: center;            background: rgba(250,18,18,0.2);            color: #000;            font-size: 30px;                 }    </style>
Final effect:

It can be seen that the use of rgba () in CSS3 is much more convenient, saves a lot of code, and the document structure is clearer, but the compatibility problem of rgba () also makes people a headache:

Finally, a compatibility solution is provided:
. Rgba {background: rgb (0.5, 0);/* The Fallback color. Here you can also use an image instead of */background: rgba (0, 0, 0 ); -ms-filter: "progid: DXImageTransform. microsoft. gradient (GradientType = 1, startColorstr = #80000000, endColorstr = #80000000) ";/* Filter for IE8 */filter: progid: DXImageTransform. microsoft. gradient (GradientType = 1, startColorstr = #80000000, endColorstr = #80000000);/* Filter for older IEs */}