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>

執行程式嘗試一下

# #