在半透明背景上淡出div的底部

我有一個包含放置在半透明背景上的文本的div。我想這個div的底部逐漸消失。在半透明背景上淡出div的底部

我用一個漸變來實現這一點。在非半透明的背景下，它沒有任何問題。

#fadeout { 
    position: absolute; 
    bottom: 0; 
    width: 100%; 
    height: 50%; 
    background: -webkit-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%); 
    background-image: -ms-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%); 
    background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%); 
    background-image: -moz-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%); 
    background-image: -o-linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.7) 100%); 
    pointer-events: none; 
}

我做了這個小提琴手展示了我想做的事：https://jsfiddle.net/ytuxn9Lu/6/（鏈接編輯添加隨機背景圖像，請參閱編輯）

的問題是gradiant疊加的背景，這樣結果增加不是我想要的。

我該怎麼做才能做到這一點？

謝謝！

編輯：要添加更多的信息，在實際應用中，body有一個圖像背景。 #parent div具有半透明背景，#fadeout-parent div包含文本和fadeout div。無論背景顏色/圖像（如果可能），解決方案都可以工作。

來源

2017-01-12 Shimrod

而不是在漸變上使用白色（255）RGB，而是使用70％RGB處的白色（179）：https：// jsfiddle。net/ytuxn9Lu/4/ – APAD1

感謝@ APAD1，但是，它似乎在黑色背景下工作，但如果您更改顏色（例如藍色），它仍會像以前一樣顯示div。 – Shimrod

你能解釋一下你的背景需求是什麼嗎？假設你希望這能夠在_any_顏色之上工作是否安全？ – chazsolo

如果我吠叫錯了樹，請原諒我。

如果你只是想淡出文本出來的專區內，你可以只改變爲：

#parent { 
    background-color: white; 
    padding: 20px; 
}

如果您希望背景div來也淡出你可以嘗試把一個漸變色上該div 。也許刪除

<div id="fadeout"></div>

一起。

來源

2017-01-12 22:48:06 EltonFlow

問題是我需要它使用半透明背景。將它設置爲白色確實有效，但這不是我的意思。 – Shimrod

這裏有一個解決方案

https://jsfiddle.net/hgtdwbrL/1/

我只是改變了梯度的值（使用拾色器從下面的內容，使色彩，並添加0.9透明度）：

background-image: linear-gradient(rgba(255, 255, 255, 0) 0%, rgba(179, 179, 179, 0.9) 95%);

來源

2017-01-12 23:49:51 Johannes

正如我在評論中描述的那樣，它只能在黑色背景下工作，但在實際應用中，背景是圖像。我剛纔在帖子中增加了關於這方面的信息。謝謝！ – Shimrod

好吧，在這種情況下（對背景圖像淡化），將有必要影響*文本顏色*。我記得有一些JS插件允許用圖像填充文本的字母形狀，所以這可能是一個解決方案（使用與背景相同的圖像），但我從來沒有嘗試過。 – Johannes

我認爲完美的方式來實現這目前不存在..

所以，還有另一個棘手的解決方案：我的

https://jsfiddle.net/ytuxn9Lu/9/

(code seems to be mandatory when posting jsfiddle link)

來源

2017-01-13 11:02:00 kipy

這還不完美，如果您改變背景以使用純色（例如紅色），您會注意到底部的不透明度比頂部更不透明 – Shimrod

我發現的東西，可以工作：

body { 
 
    background: url(https://unsplash.it/900/600?random); 
 
    padding: 50px; 
 
} 
 
#parent { 
 
    background-color: rgba(255, 255, 255, 0.7); 
 
    padding: 20px; 
 
} 
 
#fadeout-parent { 
 
    position: relative; 
 
    -webkit-mask: -webkit-gradient(linear, center top, center bottom, color-stop(0.00, rgba(0, 0, 0, 1)), color-stop(0.35, rgba(0, 0, 0, 1)), color-stop(0.50, rgba(0, 0, 0, 1)), color-stop(0.65, rgba(0, 0, 0, 1)), color-stop(1.00, rgba(0, 0, 0, 0))); 
 
}

<body> 
 
    <div id="parent"> 
 
    <div id="fadeout-parent"> 
 
     <h1>An h1 header</h1> 
 

 
     <p>Paragraphs are separated by a blank line.</p> 
 

 
     <p>2nd paragraph. <em>Italic</em>, <strong>bold</strong>, and <code>monospace</code>. Itemized lists look like:</p> 
 

 
     <ul> 
 
     <li>this one</li> 
 
     <li>that one</li> 
 
     <li>the other one</li> 
 
     </ul> 
 

 
     <p>Note that --- not considering the asterisk --- the actual text content starts at 4-columns in.</p> 
 

 
     <blockquote> 
 
     <p>Block quotes are written like so.</p> 
 

 
     <p>They can span multiple paragraphs, if you like.</p> 
 
     </blockquote> 
 

 
    </div> 
 
    </div> 
 
</body>

它有一個缺點，瀏覽器的兼容性。我在Chrome和Opera工作。

來源

2017-01-13 11:55:46 MarioZ

不完全，半透明背景必須保留在示例中，只有文本應該變暗。 – Shimrod

@Shimrod我更新了答案。 – MarioZ

在半透明背景上淡出div的底部

回答

相關問題