CSS 图像透明/不透明

131次阅读

没有评论

共计 1459 个字符，预计需要花费 4 分钟才能阅读完成。

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

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

CSS3 中属性的透明度是 opacity.

首先，我们将向您展示如何用 CSS 创建一个透明图像。

正常的图像

CSS 图像透明 / 不透明

相同的图像带有透明度：

CSS 图像透明 / 不透明

看看下面的 CSS：

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}

IE9，Firefox，Chrome，Opera，和 Safari 浏览器使用透明度属性可以将图像变的不透明。Opacity 属性值从 0.0 - 1.0。值越小，使得元素更加透明。

IE8 和早期版本使用滤镜：alpha（opacity= x）。x 可以采取的值是从 0 - 100。较低的值，使得元素更加透明。

将鼠标移到图像上：

CSS 图像透明 / 不透明

CSS 样式：

img
{
opacity:0.4;
filter:alpha(opacity=40); /* For IE8 and earlier */
}
img:hover
{
opacity:1.0;
filter:alpha(opacity=100); /* For IE8 and earlier */
}

在线运行

第一个 CSS 块是和例 1 中的代码类似。此外，我们还增加了当用户将鼠标悬停在其中一个图像上时发生什么。在这种情况下，当用户将鼠标悬停在图像上时，我们希望图片是清晰的。

此 CSS 是：opacity=1.

IE8 和更早版本使用： filter:alpha(opacity=100).

当鼠标指针远离图像时，图像将重新具有透明度。

<html>
<head>
<style>
div.background
  {
  width:500px;
  height:250px;
  background:url(klematis.jpg) repeat;
  border:2px solid black;
  }
div.transbox
  {
  width:400px;
  height:180px;
  margin:30px 50px;
  background-color:#ffffff;
  border:1px solid black;
  opacity:0.6;
  filter:alpha(opacity=60); /* For IE8 and earlier */
  }
div.transbox p
  {
  margin:30px 40px;
  font-weight:bold;
  color:#000000;
  }
</style>
</head>

<body>

<div class="background">
<div class="transbox">
<p>This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
This is some text that is placed in the transparent box.
</p>
</div>
</div>

</body>
</html>

在线运行

首先，我们创建一个固定的高度和宽度的 div 元素，带有一个背景图片和边框。然后我们在第一个 div 内部创建一个较小的 div 元素。这个 div 也有一个固定的宽度，背景颜色，边框 - 而且它是透明的。透明的 div 里面，我们在 P 元素内部添加一些文本。

正文完