Home >Web Front-end >CSS Tutorial >How to set transparency in CSS styles

How to set transparency in CSS styles

清浅Original: 2018-12-06 11:11:576184browse

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

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>

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>

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!

html5 firefox css chrome css3 html Filter 继承 animation

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to use the calc() function in CSSNext article：How to use the calc() function in CSS

See more

How to set transparency in CSS styles

Related articles