freeCodeCamp/guide/chinese/css/image-opacity-and-transparency/index.md

title	localeTitle
Image Opacity and Transparency	图像不透明度和透明度

图像不透明度和透明度

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

Opacity的值介于0.0和1.0之间。

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

例

img { 
    opacity: 0.3; 
 } 

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

CSS img { 不透明度：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.

Example:

CSS img { 不透明度：0.3; filter：alpha（opacity = 30）; } img：hover { 不透明度：1.0; filter：alpha（opacity = 100）; }

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

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

Example:

CSS img：hover { 不透明度：0.3; filter：alpha（opacity = 30）; } \`\`\` [用于显示鼠标悬停透明度的codepen示例](https://codepen.io/lvcoulter/full/xXBQoR/)

#### 更多信息：

\-w3schools.com [CSS不透明度/透明度](https://www.w3schools.com/css/css_image_transparency.asp)

\-MDN web docs [Opacity](https://developer.mozilla.org/en-US/docs/Web/CSS/opacity)