使用CSS，您可以應用漸變遮罩以淡入文本背景嗎？

我有一個全屏固定的背景圖像。我希望我的滾動div中的文本在頂部淡出，大概是通過將漸變遮罩應用於僅在div頂部的背景。我感興趣的是讓文本看起來像用戶向下滾動時會逐漸消失，但仍然有大面積的完全不透明度以便實際閱讀文本。使用CSS，您可以應用漸變遮罩以淡入文本背景嗎？

我知道webkit中有遮罩選項，但我找不到淡入到頁面背景的方法over包含的文本僅將漸變應用於元素的一小部分。

希望我已經足夠描述了。

謝謝。

來源

2012-03-01 aviemet

閱讀並遵循totorial：HTTP：/ /webdesignerwall.com/tutorials/css-gradient-text-effect – 2012-03-01 22:32:08

謝謝，我看到之前我發佈這個，它會工作，如果我只想淡出白色，但我想淡出的圖像背景的頁面。 – aviemet 2012-03-01 23:52:10

我一直在想這個完全一樣的東西。解決方案其實很簡單。雖然這當然是相當現代的CSS3功能，所以你堅持瀏覽器兼容性。

的Webkit可以照顧這與CSS單行：

-webkit-mask-image: -webkit-gradient(linear, left 90%, left bottom, from(rgba(0,0,0,1)), to(rgba(0,0,0,0)))

這將淡出任何元素它應用到的最低10％，而不使用即便如此之多的圖像。您可以添加padding-bottom: 10%以確保只有在需要滾動到更多內容時纔會淡化內容。來源：http://www.webkit.org/blog/181/css-masks/

一個Mozilla（壁虎）回退是有點麻煩，但：您可以使用its 'mask' feature，但是這需要一個SVG圖像。你可以嘗試base64 embed that image into your stylesheet ...

來源

2012-03-12 16:24:10

+22

Obligatory - http://www.alistapart.com/articles/every-time-you-call-a-proprietary-feature-css3-a-kitten-dies：P – BoltClock 2012-03-12 16:26:21

好文章，謝謝你。 – 2012-03-12 16:32:25

非常感謝，那正是我需要的！ – 2013-01-11 12:24:10

假設我正確理解你想要什麼，可以複製圖像的前300個像素，並在Photoshop中爲它們應用透明度漸變（使頂部完全不透明，底部完全透明）。

然後將此圖像置於div或其他固定在固定圖像頂部但高度爲z-index的元素。然後，主文本將滾動到背景上，但在覆蓋層div下並隨着覆蓋層朝屏幕頂部變得更加不透明而淡出。

來源

2012-03-01 22:48:36 Gareth

這將是一個很好的解決方案，只是我將整個頁面背景放在窗口大小上的優先級更高。我更希望應用一個會影響我應用它的元素和其中包含的所有元素的面具，包括文字。 – aviemet 2012-03-01 23:53:27

如果你正在衰落的純色，你可以使用一個psudo元素：

.image-container { 
 
    position: relative; 
 
    display: inline-block; 
 
    } 
 

 
.image-container:after { 
 
    content: ""; 
 
    display: block; 
 
    position: absolute; 
 
    width: 100%; 
 
    height: 55%; 
 
    bottom: 0; 
 
    background: -webkit-linear-gradient(transparent, #FFF) left repeat; 
 
    background: linear-gradient(transparent, #FFF) left repeat; 
 
}

<div class="image-container"> 
 
    <img src="https://photosharingsites.files.wordpress.com/2014/11/tiger-wild-cat-animal-winter-snow-wallpapers-free-backgrounds.jpg?w=474&h=344" alt="don't shoot me"> 
 
    </div>

來源

2015-10-02 15:57:00 ecolema

使用CSS，您可以應用漸變遮罩以淡入文本背景嗎？

回答

相關問題