如何做半透明覆蓋

我在SquareSpace上製作我的網站，並且我非常沮喪。我喜歡有一個背景（哪個方格空間爲用戶提供了無代碼的功能），並且喜歡在背景的文本部分有一些半透明的封面。我認爲這叫做覆蓋（？）。 Squarespace允許用戶添加CSS代碼。我不知道該怎麼做。我試圖谷歌，youtube等，但我似乎無法找到如何做到這一點。有人能幫我嗎？我真的很感激。我花了很多時間試圖弄清楚這一點。我想要做的是這樣的（http://blog.squarespace.com）。有背景，頂部有半透明的部分覆蓋背景。如何做半透明覆蓋

來源

2013-07-09 user2565918

添加一個div，將其設置爲position: fixed，有它的所有位置值在0（top，bottom，left和right），並給它一個rgba()背景。

請注意，這將使其下的任何東西無法點擊（除非您也給它pointer-events: none）。

Here is a jsFiddle example of the concept.

來源

2013-07-09 19:41:53

斑宇智波的回答將覆蓋整個可見的窗口，不只是它的一部分。它不適用於某些移動設備，無論是（iirc，Android WebKit不支持position: fixed）。

更好的建議是做像下面這樣...

HTML：

<div class="wrapper"> 
    text 
    <div class="overlay"></div> 
</div>

CSS：

.wrapper 
{ 
    position: relative; 
    display: inline-block; /* You could alternatively float the div, this is just to get it to fit the text width */ 
    z-index: 0; /* Not strictly necessary, but establishes its own stacking context to make it easier to handle compound/multiple overlays */ 
} 

.overlay 
{ 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    background: rgba(0, 0, 255, 0.5); 
    z-index: -1; 
}

的jsfiddle顯示之前的版本，與該文本受覆蓋層和當前版本的影響，不包含文本（並且不需要使用pointer-events: none）：http://jsfiddle.net/LGq8f/1/

當然，如果您不想對內部div爲您提供的重疊區域進行精細控制，則可以在文本中使用display: inline-block或float: left/float: right加上alpha值的背景顏色，包裝div並跳過覆蓋div。

來源

2013-07-09 19:59:25 JAB

如何做半透明覆蓋

回答

相關問題