實作CSS 不透明度漸變效果
對於具有動態背景顏色的現代網站，可以實現與透明度所提供的範例類似的不漸變效果使用CSS，但需要替代方法。
與使用白色疊加層相反，CSS 遮罩屬性提供了更通用的解決方案。一個技巧是定義一個本身就是漸變的遮罩，並將終點設為透明（透過 alpha 值）。
<code class="css">p {
color: red;
-webkit-mask-image: -webkit-gradient(linear, left top, left bottom,
from(rgba(0,0,0,1)), to(rgba(0,0,0,0)));
}</code>對遮罩屬性的支援目前僅限於現代版本的 Chrome、Safari、和歌劇。 Firefox 目前僅支援 SVG 蒙版。
但是，令人興奮的發展是，除 Internet Explorer 外，所有主要瀏覽器現在都支援所有提到的蒙版屬性。這允許在網路上無縫實現 CSS 不透明度漸層。
有關純色背景的完整演示，請參閱以下程式碼：
<code class="css">p {
color: red;
font-size: 30px;
-webkit-mask-image: linear-gradient(to left, rgba(0,0,0,1), rgba(0,0,0,0)), linear-gradient(to right, rgba(0,0,0,1), rgba(0,0,0,0));
-webkit-mask-size: 100% 50%;
-webkit-mask-repeat: no-repeat;
-webkit-mask-position: left top, left bottom;
}
div {
background-color: lightblue;
}</code>以上是如何為現代網站創建 CSS 不透明度漸變效果？的詳細內容。更多資訊請關注PHP中文網其他相關文章！
