跟大家講解下有關如何設置CSS樣式中的透明度，相信小伙伴們對這個話題應該也很關注吧，現在就為小伙伴們說說如何設置CSS樣式中的透明度，小編也收集到了有關如何設置CSS樣式中的透明度的相關資料，希望大家看到了會喜歡。
CSS樣式中透明度的設置方法：首先創建一個HTML示例文件；然后通過img創建一張圖片；最后通過css中的opacity屬性來設置透明度，其語法如“opacity: value|inherit;”。
本文操作環境：Windows7系統、Dell G3電腦、HTML5&&CSS3版。
在CSS中我們可以通過給元素添加opacity屬性來改變它的透明度，opacity的值為0到1，值越小越透明
在頁面中我們常常用到CSS中的一個樣式來設置透明度，來美化頁面，今天將和大家介紹如何使用CSS中的opacity屬性，具有一定的參考價值，希望對大家有所幫助
opacity屬性
opacity: value|inherit;value：用來設置不透明度。從 0.0 （完全透明）到 1.0（完全不透明）
inherit ：應該從父元素繼承 opacity 屬性的值
例：
將圖片設置為不透明
<body>未設置透明度：<img src="images/5.jpg" style="width:100px;height:100px;">設置了透明度：<img src="images/5.jpg" style="opacity: 0.6;width:100px;height:100px;"></body>效果圖如下：
注意：
在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"></div></body>效果圖如下：
總結：以上就是本篇文章的全部內容了，希望對大家的學習有所幫助。
以上就是如何設置CSS樣式中的透明度的詳細內容，更多請關注php中文網其它相關文章！
來源：php中文網