038_CSS3图像透明度

最新推荐文章于 2021-09-10 08:56:38 发布

原创最新推荐文章于 2021-09-10 08:56:38 发布 · 157 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#css #css3 #web前端

css学习专栏收录该内容

52 篇文章

订阅专栏

本文介绍了CSS3中opacity属性的使用方法，该属性用于设置元素的不透明度级别，取值范围为0.0到1.0。通过示例代码展示了如何在鼠标悬停时改变图片的透明度。

1. opacity属性设置元素的不透明级别。

2. opacity属性能够设置的值从0.0到1.0。值越小, 越透明。

3. 默认值

4. 例子

4.1. 代码

<!DOCTYPE html>
<html>
	<head>
		<title>CSS3图像透明度</title>
		<meta charset="utf-8" />
		
		<style type="text/css">
			img {
				opacity: 1;
			}
			img:hover {
				opacity: 0.2;
			}
		</style>
	</head>
	<body>
		<img src="flower.jpg" />
	</body>
</html>

4.2. 效果图