河南省灵宝外贸网站建设-双语网站制作-企业中英文网站优化推广-多语言集团网站定制开发

实例

img {
  opacity: 0.5;}

亲自试一试

透明悬停效果

opacity 属性通常与 :hover 选择器一同使用，这样就可以在鼠标悬停时更改不透明度：

实例

img {
  opacity: 0.5;}img:hover {
  opacity: 1.0;}

亲自试一试

例子解释

第一个 CSS 块类似于实例 1 中的代码。此外，我们还添加了当用户将鼠标悬停在其中一个图像上时的效果。在这种情况下，当用户将鼠标悬停在图像上时，我们希望图像不透明。这条 CSS 是 opacity:1;。

当鼠标指针离开图像时，图像将再次透明。

反向悬停效果的例子：

实例

img:hover {
  opacity: 0.5;}

亲自试一试

透明盒

使用 opacity 属性为元素的背景添加透明度时，其所有子元素都继承相同的透明度。这可能会使完全透明的元素内的文本难以阅读：

实例

div {
  opacity: 0.3;}

亲自试一试

使用 RGBA 的透明度

如果您不希望对子元素应用不透明度，如上面的例子，请使用 RGBA 颜色值。下面的例子设置背景色而不是文本的不透明度：

您已经从我们的 CSS 颜色 这一章中学到了可以将 RGB 用作颜色值。除 RGB 外，还可以将 RGB 颜色值与 alpha 通道（RGBA）一起使用 - 该通道规定颜色的不透明度。

RGBA 颜色值指定为：rgba(red, green, blue, alpha)。 alpha 参数是介于 0.0（完全透明）和 1.0（完全不透明）之间的数字。

提示：您将在我们的 CSS 颜色 这一章中学到有关 RGBA 颜色的更多知识。

实例

div {
  background: rgba(76, 175, 80, 0.3) /* Green background with 30% opacity */}

亲自试一试