溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要介紹了CSS圖像透明度怎么設置的相關知識，內容詳細易懂，操作簡單快捷，具有一定借鑒價值，相信大家閱讀完這篇CSS圖像透明度怎么設置文章都會有所收獲，下面我們一起來看看吧。
定義和用法
opacity 屬性設置元素的不透明級別。
語法
opacity: value|inherit;
實例一：創建透明圖像
<!DOCTYPE html>
<html>
<head>
<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>
<h2>圖像透明度</h2>
<img src="http://pic.58pic.com/58pic/15/36/00/73b58PICgvY_1024.jpg" alt="Peach Blossom" />
<p><b>注釋：</b>在 IE 中，必須添加 <!DOCTYPE>，這樣才能將 :hover 選擇器用于除了 <a> 之外的其它元素。</p>
</body>
</html>實例二：半透明框中加文本
呈現方式
<!DOCTYPE html>
<html>
<head>
<style>
.background
{
width: 400px;
height: 266px;
background: url(http://pic.58pic.com/58pic/15/36/00/73b58PICgvY_1024.jpg) no-repeat ;
border: 1px solid black;
}
.transbox
{
width: 338px;
height: 204px;
margin:30px;
background-color: #ffffff;
border: 1px solid black;
/* for IE */
filter:alpha(opacity=60);
/* CSS3 standard */
opacity:0.6;
}
.transbox p
{
margin: 30px 40px;
}
</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>關于“CSS圖像透明度怎么設置”這篇文章的內容就介紹到這里，感謝各位的閱讀！相信大家對“CSS圖像透明度怎么設置”知識都有一定的了解，大家如果還想學習更多知識，歡迎關注億速云行業資訊頻道。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
