How to set transparency in CSS style: first create an HTML sample file; then create an image through img; finally set transparency through the opacity attribute in CSS, with the syntax such as "opacity: value|inherit; ".
The operating environment of this article: Windows 7 system, Dell G3 computer, HTML5&&CSS3 version.
In CSS, we can change the transparency of an element by adding the opacity attribute. The value of opacity is 0 to 1. The smaller the value, the more transparent it is.
We often use CSS in the page Use one of the styles to set transparency and beautify the page. Today I will introduce to you how to use the opacity attribute in CSS. It has certain reference value and I hope it will be helpful to everyone.
opacity attribute
opacity: value|inherit;
value: used to set opacity. From 0.0 (fully transparent) to 1.0 (fully opaque)
inherit: The value of the opacity attribute should be inherited from the parent element
Example:
Set the image to opaque
<body> 未设置透明度: <img src="images/5.jpg" style="max-width:90%" alt="How to set transparency in CSS styles" > 设置了透明度: <img src="images/5.jpg" style="max-width:90%" alt="How to set transparency in CSS styles" > </body>
The rendering is as follows:
##Note:
Use the attribute opacity to set transparency in IE9, Firefox, Chrome, and Opera browsers. The opacity property can be set to values from 0.0 to 1.0. The smaller the value, the more transparent it is. IE8 and earlier versions use the filter filter:alpha(opacity=x), x can take values from 0 to 100. The smaller the value, the more transparent it is.【Recommended course: CSS course】
Case Sharing
Use the opacity attribute to create a looming downward arrow<style> .box { -webkit-animation:box 5s infinite; -webkit-animation-fill-mode: both; } @-webkit-keyframes box { from { opacity: 0; } to { opacity: 1; } } </style> </head> <body> <div class="box"> <img src="images/jiantou.png" alt="How to set transparency in CSS styles" > </div> </body>
The above is the detailed content of How to set transparency in CSS styles. For more information, please follow other related articles on the PHP Chinese website!