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 >

00