How to set transparency in CSS styles-CSS Tutorial-php.cn

How to set transparency in CSS styles

清浅

Release： 2021-04-18 14:49:16

Original

6186 people have browsed it

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; ".

How to set transparency in CSS styles

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;

Copy after login

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

How to set transparency in CSS styles

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>

Copy after login

The rendering is as follows:

How to set transparency in CSS styles

##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

In this case, you need to use the animation attribute in CSS3 to specify the animation by setting the value of the animation attribute. The execution time and the design of transparency changes during the animation process

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

Copy after login

The renderings are as follows:

How to set transparency in CSS styles

Summary: The above is the entire content of this article , I hope it will be helpful to everyone’s study.

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!