CSS 图像透明/不透明

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

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

实例1 - 创建一个透明图像

CSS3中属性的透明度是 opacity.

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

正常的图像

相同的图像带有透明度：

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        img
 {
            opacity:0.4;
            filter:alpha(opacity=40); /* For IE8 and earlier */
 }
    </style>
</head>
<body>
<img src="https://img.php.cn/upload/course/000/000/006/580837363b987802.jpg" height="300px" width="300px">
</body>
</html>

运行程序看看

看看下面的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。较低的值，使得元素更加透明。

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

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        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 */
 }
    </style>
</head>
<body>
<img src="https://img.php.cn/upload/course/000/000/006/580837363b987802.jpg" height="300px" width="300px">
</body>
</html>

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

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

实例3 - 透明的盒子中的文字

这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。这些文本在透明框里。

源代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <style>
        div.background
 {
            width:500px;
            height:250px;
            background:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg) repeat;
            border:2px solid black;
        }
        div.transbox
 {
            width:400px;
            height:180px;
            margin:30px 50px;
            background-color: #fcffe0;
            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>人生就像一张纸，行走间，如素笺染墨。每一次经历都是一笔浓墨或淡彩;每一次成功或挫折，每一次心跳都是一个不同凡响的音符，淡然或张狂，如那枝上的鸟儿，可以自由恋爱，倾心欢唱，即使这素淡的冬日，也有余韵绕梁……
        </p>
    </div>
</div>
</body>
</html>

运行程序尝试一下

新建文件

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <style>
 div.background
 {
 width:500px;
 height:250px;
 background:url(https://img.php.cn/upload/course/000/000/006/5809800b44336872.jpg) repeat;
 border:2px solid black;
 }
 div.transbox
 {
 width:400px;
 height:180px;
 margin:30px 50px;
 background-color: #fcffe0;
 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>人生就像一张纸，行走间，如素笺染墨。每一次经历都是一笔浓墨或淡彩;每一次成功或挫折，每一次心跳都是一个不同凡响的音符，淡然或张狂，如那枝上的鸟儿，可以自由恋爱，倾心欢唱，即使这素淡的冬日，也有余韵绕梁……
 </p>
 </div>
</div>

</body>
</html>

提交重置代码

自动运行