CSS 不透明度 透明度,设置图片文字不透明度

 2022-05-28    537  

CSS 不透明度  透明度,设置图片文字不透明度

opacity 属性指定元素的不透明度/透明度。

一、透明图像

opacity 属性的取值范围为 0.0-1.0。值越低,越透明:


coffee

opacity 0.2

coffee

opacity 0.5

coffee

opacity 1

实例

img {
  opacity: 0.5;
}

二、透明悬停效果

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

Tulip
Tulip
Flower

实例

img {
  opacity: 0.5;
}

三、例子解释

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

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

反向悬停效果的例子:

Tulip
Tulip
Flower

实例

img:hover {
  opacity: 0.5;
}
  •  标签:  
  • css
  •  

原文链接:https://77isp.com/post/999.html

=========================================

https://77isp.com/ 为 “云服务器技术网” 唯一官方服务平台,请勿相信其他任何渠道。