我一直試圖掩蓋一個我正在開發的網站的圖像。正如你將從片段中看到的，我正試圖用面具作為主頁的標志。我還在學習，我發現這個特性真的很有趣，但是當我執行下面的代碼時，它只是顯示一個尺寸為src的透明圖像。我用CSS寫了這個:
.agesciIcon {
display: block;
margin-left: auto;
margin-right: auto;
height: fit-content;
max-width: 100%;
max-height: 100%;
mask-image: url(tiger.png);
-webkit-mask-image: url(tiger.png);
mask-size: cover;
-webkit-mask-size: cover;
}與相同的結果
-webkit-mask: url(tiger.png);
mask: url(tiger.png);這是HTML格式的:
<body>
<section>
<header>
<img class="agesciIcon" src="mountMaskImg.jpg" alt="agesci icon">
<h1>Montecelio 1</h1>
<h3>Un'associazione di cent' anni</h3>
</header>很明顯，在我的代碼中有結束的body標簽，但是包含所有的代碼太長了
我的tiger.png實際上是一個黑白巴布亞新幾內亞。我已經看到了所有可能的教程，但它們都和我編碼的一樣。我試著把背景圖片改成a .avif(就像我在凱文·鮑威爾的教程里看到的那樣)，但是它一點也沒變
如果有幫助的話，這是我的兩個即時通訊 老虎 背景
默認情況下，CSS使用alpha通道處理遮罩。使用特殊屬性mask-mode:luminance；使用圖像的顏色數據進行遮罩。 請注意，它沒有跨瀏覽器的全面支持。