CSS 图像透明/不透明

最新推荐文章于 2025-09-12 07:54:45 发布

原创最新推荐文章于 2025-09-12 07:54:45 发布 · 1.2w 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#CSS #web

CSS 图像透明/不透明

使用CSS很容易创建透明的图像。

注意：CSS Opacity属性是W3C的CSS3建议的一部分。

创建透明图像 - 悬停效果

<!DOCTYPE html>
<html>
<head>
<title>test</title> 
<style>
img
{
	opacity:0.4;
	filter:alpha(opacity=40); /* 适用 IE8 及其更早版本 */
}
img:hover
{
	opacity:1.0;
	filter:alpha(opacity=100); /* 适用 IE8 及其更早版本 */
}
</style>
</head>
<body>

<h1>图片透明度</h1>
<p>opacity 属性通常与 :hover 选择器一起使用，在鼠标移动到图片上后改变图片的透明度：</p>
<img src="sl.png" width="150" height="113" alt="sl">
<img src="sl.png" width="150" height="113" alt="sl">

<p><b>注意:</b>在 IE 中必须声明 &lt;!DOCTYPE&gt; 才能保证 :hover 选择器能够有效。</p>
</body>
</html>