Code on:
<! DOCTYPE html> <ptml> <pead> <title>Demo</title> <style type= "Text/css" > #div1 {Pad ding:10px; width:380px; height:205px; Background:url (/upload/201007/20100713220102894.jpg); } #div2 {color: #FFF; font-size:40px; Font-weight:bold; Text-align:center; height:205px; line-height:205px; Background:rgba (125, 0, 0,. 3); Filter:progid:DXImageTransform.Microsoft.gradient (startcolorstr= #4B7D0000, endcolorstr= #4B7D0000); } </style> </pead> <body> <div id= "Div1" > <div id= "div2" > Hello world! </div> </div> </body> </ptml>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
The STARTCOLORSTR parameter value in the DXImageTransform.Microsoft.gradient filter is #aarrggbb, where AA is the hexadecimal representation of opacity, 00 is fully transparent, and FF is completely opaque, The decimal range is 0~255, and the remaining rrggbb is the hexadecimal code for the color. Examples of Background:rgba (125, 0, 0,. 3) indicate a red background of 30% opacity. How to convert 30% of the opacity into a 16 system? Very simple, first calculate the #aa decimal x,x/255 = 3/10, the solution X=3*255/10, and then convert X to 16, approximately equal to 4 B.
Attached below are the pictures used in the example:
Author: Zhou Mingzhi
The article is part of the content from: RGBa Browser Support
