W3C中文教程
全球最大最新的中文 Web 技术教程
HTML CSS SQL PHP COLORS MYSQL BOOTSTRAP
 

CSS 图像透明/不透明



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

CSS的 opacity 属性是W3C的CSS3建议的一部分。


Example 1 - 创建一个透明图像

CSS3中属性的透明度是 opacity

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

Regular image:

klematis

The same image with transparency:

klematis

看看下面的CSS:

Example

img {
    opacity: 0.4;
    filter: alpha(opacity=40); /* For IE8 and earlier */
}
尝试一下 »

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

IE8和早期版本使用滤镜:filter:alpha(opacity=x)。 x可以采取的值是从0 - 100。较低的值,使得元素更加透明。


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

将鼠标移到图像上:

klematis klematis

看看下面的CSS:

Example

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;.

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


Example 3 - 透明的盒子中的文字

This is some text that is placed in the transparent box.


源代码如下:

Example

<html>
<head>
<style>
div.background {
    background: url(http://ojaos57mw.bkt.clouddn.com/klematis.jpg) repeat;
    border: 2px solid black;
}

div.transbox {
    margin: 30px;
    background-color: #ffffff;
    border: 1px solid black;
    opacity: 0.6;
    filter: alpha(opacity=60); /* For IE8 and earlier */
}

div.transbox p {
    margin: 5%;
    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.</p>
  </div>
</div>

</body>
</html>
尝试一下 »

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