Home > Article > Web Front-end > How to use css opacity attribute

How to use css opacity attribute

青灯夜游Original: 2019-05-30 14:19:315224browse

css The opacity attribute is used to set the opacity level of an element; through this attribute we can set the transparency of images, text, box models, etc.

How to use the css opacity attribute?

The opacity property sets the opacity level of an element.

Syntax:

opacity: value|inherit;

Attribute value:

● Value: Specifies 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.

Note: All major browsers support the opacity attribute. IE8 and earlier support alternative filter attributes. For example: filter:Alpha(opacity=50).

css opacity attribute example

<!DOCTYPE html>
<html>
<head>
<script>
function ChangeOpacity(x)
{
// Return the text of the selected option
var opacity=x.options[x.selectedIndex].text;
var el=document.getElementById("p1");
if (el.style.opacity!==undefined)
  {el.style.opacity=opacity;}
else
  {alert("您的浏览器不支持此示例!");}
}
</script>
</head>
<body>
<p id="p1">从下面的列表中选择一个值，以更改此元素的不透明度！</p>
<select onchange="ChangeOpacity(this);" size="5">
  <option />0
  <option />0.2
  <option />0.5
  <option />0.8
  <option selected="selected" />1
</select>
</body>
</html>

Rendering:

How to use css opacity attribute

The above is the detailed content of How to use css opacity attribute. For more information, please follow other related articles on the PHP Chinese website!

css Filter 继承盒子模型

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 css font-size attributeNext article：How to use css font-size attribute

See more

How to use css opacity attribute

Related articles