CSS 图像透明/不透明

CSS 图像透明/不透明


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

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


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

CSS3中属性的透明度是 opacity.

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

正常的图像

8.jpg

相同的图像带有透明度:

实例

<!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>
提交重置代码