✍ 📁 🙈 🙉 🙊 : CSS opacity 透明效果

CSS opacity 透明效果

CSS3 opacity 屬性的功能是用來控制元素的透明效果，如 img 、div 、span 、table ... 等元素，使用 CSS3 opacity 屬性來輕鬆的達到網頁元素不透明度的調整，屬性的語法非常簡單，只需要透過數字的調整。
opacity: x : x 從 0.0 至 1.0 都可以，完全透明是 0.0，完全不透明是 1.0。

<div style="opacity:0.1;padding: 5px 10px; border: 1px solid black;" > opacity:0.3</div>
<div style="opacity:0.6;padding: 5px 10px; border: 1px solid black;" > opacity:0.6</div>
<div style="opacity:1.0;padding: 5px 10px; border: 1px solid black;" > opacity:1</div>

<div style="padding: 5px 10px; border: 1px solid black;display: table-cell;">
<img style="width:auto;opacity:0.1" src="https://4.bp.blogspot.com/-aYcyfNZIe4Y/WUZAa7g5QsI/AAAAAAAAQBo/AkAUEIM3J-QvMfgzunpfBCbOnoBMcI5FwCLcBGAs/s200/images.jpg" />
<br>opacity:0.1
</div >
<div style="padding: 5px 10px; border: 1px solid black;display: table-cell;">
<img style="width:auto;opacity:0.4;" src="https://4.bp.blogspot.com/-aYcyfNZIe4Y/WUZAa7g5QsI/AAAAAAAAQBo/AkAUEIM3J-QvMfgzunpfBCbOnoBMcI5FwCLcBGAs/s200/images.jpg" />
<br>opacity:0.4
</div >
<div style="padding: 5px 10px; border: 1px solid black;display: table-cell;">
<img style="width:auto;opacity:1.0;" src="https://4.bp.blogspot.com/-aYcyfNZIe4Y/WUZAa7g5QsI/AAAAAAAAQBo/AkAUEIM3J-QvMfgzunpfBCbOnoBMcI5FwCLcBGAs/s200/images.jpg" />
<br>opacity:1.0
</div >

✍ 📁 🙈 🙉 🙊

window Resize

html 測試左入右出

html 測試上入下出

html 測試單入單出

html 測試左單右單