首頁 > 文章 > web前端 > 如何設定CSS樣式中的透明度

如何設定CSS樣式中的透明度

清浅原創: 2018-12-06 11:11:576152瀏覽

CSS樣式中透明度的設定方法：首先建立一個HTML範例檔案；然後透過img建立圖片；最後透過css中的opacity屬性來設定透明度，其語法如「opacity: value|inherit; 」。

如何設定CSS樣式中的透明度

本文操作環境：Windows7系統、Dell G3電腦、HTML5&&CSS3版。

在CSS中我們可以透過為元素添加opacity屬性來改變它的透明度，opacity的值為0到1，值越小越透明

在頁面中我們常常用到CSS中的一個樣式來設定透明度，來美化頁面，今天將和大家介紹如何使用CSS中的opacity屬性，具有一定的參考價值，希望對大家有所幫助

opacity屬性

opacity: value|inherit;

value：用來設定不透明度。從0.0 （完全透明）到1.0（完全不透明）

inherit ：應該從父元素繼承opacity 屬性的值

如何設定CSS樣式中的透明度

例：

將圖片設定為不透明

<body>
未设置透明度：
<img  src="images/5.jpg"   style="max-width:90%" alt="如何設定CSS樣式中的透明度" >
设置了透明度：
<img  src="images/5.jpg"   style="max-width:90%" alt="如何設定CSS樣式中的透明度" >
</body>

效果圖如下：

如何設定CSS樣式中的透明度

注意：

在IE9, Firefox, Chrome, Opera 瀏覽器中使用屬性 opacity 來設定透明度。 opacity 屬性能夠設定的值從 0.0 到 1.0。值越小，越透明。

IE8 以及更早的版本使用濾鏡 filter:alpha(opacity=x)，x 能夠取的值從 0 到 100。值越小，越透明。

【推薦課程：CSS課程#】

案例分享

使用opacity屬性製作一個若隱若現的向下的箭頭

在這個案例中需要使用到CSS3中的animation動畫屬性，透過設定動畫屬性的值來規定動畫執行的時間以及在動畫過程中的透明度變化的設計

<style>
.box
  {  -webkit-animation:box 5s infinite;
    -webkit-animation-fill-mode: both;
      }
@-webkit-keyframes box
 {
from
{   
 opacity: 0;
  }
 to
{
  opacity: 1;
 }
  }
</style>	
</head>
<body>
<div class="box">
<img  src="images/jiantou.png" alt="如何設定CSS樣式中的透明度" >
</div>
</body>

效果圖如下：

如何設定CSS樣式中的透明度

總結：以上就是本篇文章的全部內容了，希望對大家的學習有幫助。

以上是如何設定CSS樣式中的透明度的詳細內容。更多資訊請關注PHP中文網其他相關文章！

html5 firefox css chrome css3 html Filter 继承 animation

陳述：

本文內容由網友自願投稿，版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容，請聯絡admin@php.cn

上一篇：CSS中calc()函數怎麼使用下一篇：CSS中calc()函數怎麼使用

看更多