資料結構
網路
RDBMS
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理
化學
生物
數學
英語
經濟學
心理學
社會研究
服裝研究
法學研究使用 CSS 設定跨瀏覽器透明度
屬性 opacity 是現代解決方案，適用於 Firefox、Safari、opera 以及所有版本的 Chrome。-moz-opacity 屬性是 Firefox 的 opacity 屬性，而 –khtml-opacity 屬性是 Safari 的屬性。filter 屬性可產生類似於 opacity 的效果。將所有這些值作為現代 opacity 的後備方式，可使我們在所有瀏覽器中使用 opacity。
設定圖片
我們將檢查圖片的跨瀏覽器透明度。上面的第二張圖片在所有瀏覽器上都會變暗 −
<img src="https://tutorialspoint.tw/python/images/python.jpg" /> <img class="transparent" src="https://tutorialspoint.tw/python/images/python.jpg" />
第二張圖片的透明度
使用 opacity 屬性，設定第二張圖片的透明度 −
.transparent {
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
跨瀏覽器透明度
-moz-opacity 屬性是 Firefox 的 opacity 屬性 −
-moz-opacity: 0.3;
–khtml-opacity 屬性是 Safari 版本的屬性 −
-khtml-opacity: 0.3;
示例
以下程式碼使用 CSS 實現跨瀏覽器透明度 −
<!DOCTYPE html>
<html>
<head>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
img {
width: 270px;
height: 200px;
}
.transparent {
filter: alpha(opacity=30);
-moz-opacity: 0.3;
-khtml-opacity: 0.3;
opacity: 0.3;
}
</style>
</head>
<body>
<h1>Cross browser opacity</h1>
<img src="https://tutorialspoint.tw/python/images/python.jpg" />
<img class="transparent" src="https://tutorialspoint.tw/python/images/python.jpg" />
<h3>The second image above will get opaque on all browsers</h3>
</body>
</html>
更新於: 2023 年 12 月 27 日
285 次瀏覽
廣告