css中opacity屬性的使用方法

發(fā)布時間：2020-09-23 14:46:12 來源：億速云閱讀：292 作者：小新欄目：web開發(fā)

css中opacity屬性的使用方法？這個問題可能是我們?nèi)粘W(xué)習(xí)或工作經(jīng)常見到的。希望通過這個問題能讓你收獲頗深。下面是小編給大家?guī)淼膮⒖純?nèi)容，讓我們一起來看看吧！

css opacity屬性用于設(shè)置一個元素的不透明度級別；通過該屬性我們可以設(shè)置圖片、文字、盒子模型等等的透明度。

css opacity屬性怎么用？

opacity屬性設(shè)置一個元素的不透明度級別。

語法：

opacity: value|inherit;

屬性值：

●　value：規(guī)定不透明度。從 0.0 （完全透明）到 1.0（完全不透明）。

●　inherit：應(yīng)該從父元素繼承 opacity 屬性的值。

注釋：所有主流瀏覽器都支持opacity屬性。IE8 以及更早的版本支持替代的 filter 屬性。例如：filter:Alpha(opacity=50)。

css opacity屬性示例

<!DOCTYPE html>
<html>
<head>
<script>
function ChangeOpacity(x)
{
// Return the text of the selected option
var opacity=x.options[x.selectedIndex].text;
var el=document.getElementById("p1");
if (el.style.opacity!==undefined)
  {el.style.opacity=opacity;}
else
  {alert("您的瀏覽器不支持此示例!");}
}
</script>
</head>
<body>
<p id="p1">從下面的列表中選擇一個值，以更改此元素的不透明度！</p>
<select onchange="ChangeOpacity(this);" size="5">
  <option />0
  <option />0.2
  <option />0.5
  <option />0.8
  <option selected="selected" />1
</select>
</body>
</html>

效果圖：

css中opacity屬性的使用方法

感謝各位的閱讀！看完上述內(nèi)容，你們對css中opacity屬性的使用方法大概了解了嗎？希望文章內(nèi)容對大家有所幫助。如果想了解更多相關(guān)文章內(nèi)容，歡迎關(guān)注億速云行業(yè)資訊頻道。

向AI問一下細節(jié)

css中opacity屬性的使用方法

猜你喜歡

最新資訊

相關(guān)推薦

相關(guān)標簽