FFF啊啊啊

导航

CSS 图像透明/不透明

1.如何创建一个透明图像

CSS3中属性的透明度是 opacity

用CSS创建一个透明图像的代码：

img
{
  opacity:0.4;
  filter:alpha(opacity=40); 
}

注意： Opacity属性值从0.0 - 1.0。值越小，使得元素更加透明。

2.图像的透明度 - 悬停效果

当鼠标放到图片上，可以有一个悬停效果，需要用到hover选择器（:hover选择器用于选择鼠标指针浮动在上面的元素），用两个透明度来展示效果，让效果更直观。

代码：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>title</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="klematis.jpg" width="150" height="113" alt="klematis">
<img src="/images/klematis2.jpg" width="150" height="113" alt="klematis">

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

在此代码中，当鼠标放到图片上，可以使照片清晰，当鼠标远离图片时，图片将重新具有透明度。

posted on 2021-11-21 00:21  FFF啊啊啊  阅读(128)  评论(0)  编辑  收藏  举报