CSS不透明度属性和图像不透明度说明

The opacity property controls how opaque an element is on a scale of 0.0 to 1.0. The lower the value, the more transparent the element is.

opacity属性控制元素在0.0到1.0范围内的opacity 。 值越低，元素越透明。

You can choose up to what extent you want to make the element transparent. You have to add the following CSS property to achieve the transparency levels.

您可以选择要使元素透明的程度。 您必须添加以下CSS属性以实现透明度级别。

Fully Opaque

完全不透明

.class-name {
  opacity: 1;
}

/* OR */

.class-name {
  opacity: 1.0;
}

Semitransparent

半透明

.class-name {
  opacity: 0.5;
}

Fully transparent

完全透明

.class-name {
  opacity: 0;
}

/* OR */

.class-name {
  opacity: 0.0;
}

Alternatively, you can use rgba to set the opacity of an element:

另外，您可以使用rgba设置元素的不透明度：

.class-name{
  background-color: rgba(0, 0, 0, .5);
}

This sets the background-color of an element to black with 50% opacity. The last value in an rgba value is the alpha value. An alpha value of 1 is equal to 100% opacity, and 0.5 (or .5 like above) is equal to 50% opacity.

这会将元素的background-color设置为不透明度为50％的黑色。 rgba值中的最后一个值是alpha值 。 Alpha值1等于100％不透明度，而0.5(或上面的.5)等于50％不透明度。

图像不透明度和透明度 (Image Opacity and Transparency)

The opacity property allows you to make an image transparent by lowering how opaque it is.

opacity属性允许您通过降低图像的opacity来使其透明。

Opacity takes a value between 0.0 and 1.0.

Opacity取值介于0.0到1.0之间。

1.0 is the default value for any image. It is fully opaque.

1.0是任何图像的默认值。 它是完全不透明的。

Example

例

img {
    opacity: 0.3;
 }

Include filter: alpha(opacity=x) for IE8 and earlier. The x takes a value from 0-100.

包括filter: alpha(opacity=x) IE8和更早版本的filter: alpha(opacity=x) 。 x取0-100的值。

img {
   opacity: 0.3;
   filter: alpha(opacity=30);
}

Here’s an example of an image set to the parameters in the example above.

这是上面示例中设置为参数的图像的示例。

You can pair opacity with :hover to create a dynamic mouse-over effect.

您可以将opacity与:hover配对以创建动态的鼠标悬停效果。

Example:

例：

img {
    opacity: 0.3;
    filter: alpha(opacity=30);
}
img:hover {
   opacity: 1.0;
   filter: alpha(opacity=100);
}

A codepen example to show a transparent image turning opaque on hover

一个Codepen示例，显示透明图像在悬停时变为不透明

You can create the opposite effect with less code since the image is 1.0 opacity by default

您可以用更少的代码创建相反的效果，因为默认情况下图像的透明度为1.0

Example:

例：

img:hover {
   opacity: 0.3;
   filter: alpha(opacity=30);
}

Here's a codepen example to show transparency on mouse-over.

这是一个Codepen示例，显示鼠标悬停时的透明性 。

有关CSS的更多信息 (More about CSS)

级联样式表(CSS) (Cascading Style Sheets (CSS))

CSS is an acronym for Cascading Style Sheets. It was first invented in 1996, and is now a standard feature of all major web browsers.

CSS是层叠样式表的缩写。 它于1996年首次发明，现在已成为所有主要网络浏览器的标准功能。

CSS allows developers to control how web pages look by “styling” the HTML structure of that page.

CSS允许开发人员通过“样式化”页面HTML结构来控制网页的外观。

CSS specifications are maintained by the World Wide Web Consortium (W3C).

CSS规范由万维网联盟(W3C)维护。

You can build some pretty amazing things in CSS alone, such as this pure-CSS Minesweeper game (which uses no JavaScript).

您可以单独在CSS中构建一些非常令人惊奇的东西，例如此纯CSS Minesweeper游戏 (不使用JavaScript)。

翻译自: https://www.freecodecamp.org/news/css-opacity/