背景圖像上的半透明顏色層？

Question

我有一個DIV，我想把一個模式作爲背景。這種模式是灰色的。所以爲了讓它更好看一些，我想把一個透明的顏色「層」放在上面。以下是我嘗試過的但沒有奏效的。有沒有辦法將彩色圖層放在背景圖片上？預先感謝您的回覆。乾杯。馬克。

這裏是我的CSS：

background: url('../img/bg/diagonalnoise.png'); 
background-color: rgba(248, 247, 216, 0.7); 

Answer 1

這就是：

.background { 
    background:url('../img/bg/diagonalnoise.png'); 
    position: relative; 
} 

.layer { 
    background-color: rgba(248, 247, 216, 0.7); 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
} 

HTML此：

<div class="background"> 
    <div class="layer"> 
    </div> 
</div> 

當然，你需要定義的寬度和高度與.background類，如果裏面沒有其他元素的話

Answer 2

然後，您需要使用bg圖像和它與背景顏色的內容元素的包裝元素：

<div id="Wrapper"> 
    <div id="Content"> 
    <!-- content here --> 
    </div> 
</div> 

和CSS：

#Wrapper{ 
    background:url(../img/bg/diagonalnoise.png); 
    width:300px; 
    height:300px; 
} 

#Content{ 
    background-color:rgba(248,247,216,0.7); 
    width:100%; 
    height:100%; 
} 

Answer 3

見我的答案在https://stackoverflow.com/a/18471979/193494進行了全面的概述可能的解決方案：

1. 使用多個背景的線性梯度，
2. 帶有生成的PNG的多個背景，或
3. 樣式：在僞元素之後充當輔助背景層。

Answer 4

試試這個。適用於我。

.background { 
    background-image: url(images/images.jpg); 
    display: block; 
    position: relative; 
} 

.background::after { 
    content: ""; 
    background: rgba(45, 88, 35, 0.7); 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    z-index: 1; 
} 

.background > * { 
    z-index: 10; 
} 

Answer 5

我知道這是一個非常古老的線程，但它顯示在谷歌的頂部，所以這裏有另一種選擇。

這是純粹的CSS，不需要任何額外的HTML。

box-shadow: inset 0 0 0 1000px rgba(0,0,0,.2); 

有針對的box-shadow功能使用數量驚人的。

Answer 6

從CSS-技巧...有一個一步到位的方式來做到這一點沒有Z-索引和添加僞elements--需要線性漸變，我覺得意味着你需要支持CSS3

.tinted-image { 
    background: 
    /* top, transparent red */ 
    linear-gradient(
     rgba(255, 0, 0, 0.45), 
     rgba(255, 0, 0, 0.45) 
    ), 
    /* your image */ 
    url(image.jpg); 
} 

Answer 7

我我已經使用這種方法將顏色色調以及漸變應用於圖像，以便在無法控制圖像顏色配置文件時使動態重疊文本更容易識別。你不必擔心z-index。

HTML

<div class="background-image"></div> 

SASS

.background-image { 
    background: url('../img/bg/diagonalnoise.png') repeat; 
    &:before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    left: 0; 
    right: 0; 
    bottom: 0; 
    background: rgba(248, 247, 216, 0.7); 
    } 
} 

CSS

.background-image { 
    background: url('../img/bg/diagonalnoise.png') repeat; 
} 

.background-image:before { 
    content: ''; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    right: 0; 
    left: 0; 
    background: rgba(248, 247, 216, 0.7); 
    } 

希望它可以幫助

Answer 8

爲什麼這麼複雜？你的解決方案几乎是正確的，除了這是一種更容易的方式使圖案透明和背景色固體。 PNG可以包含透明膠片。因此，使用photoshop將圖案設置爲70％並保留圖片以使圖案透明。那麼你只需要一個選擇器。作品跨瀏覽器。

CSS：

.background { 
    background: url('../img/bg/diagonalnoise.png');/* transparent png image*/ 
    background-color: rgb(248, 247, 216); 
} 

HTML：

<div class="background"> 
    ... 
</div> 

Answer 9

您還可以使用線性漸變和圖像： http://codepen.io/anon/pen/RPweox

.background{ 
    background: linear-gradient(rgba(0,0,0,.5), rgba(0,0,0,.5)), 
    url('http://www.imageurl.com'); 
} 

這是因爲線性漸變函數創建一個添加到背景堆棧的圖像。 https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Answer 10

.background 
{ 
    background: linear-gradient(rgba(248, 247, 216, 0.7), rgba(248, 247, 216, 0.7)), url('../img/bg/diagonalnoise.png') no-repeat center fixed; 
    background-size:cover; 
} 

Answer 11

可以使用半透明像素，它可以生成例如here，甚至用base64 下面是白色的50％爲例：

background-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAQAAAC1HAwCAAAAC0lEQVR42mP8Xw8AAoMBgDTD2qgAAAAASUVORK5CYII=), 
url(../img/leftpanel/intro1.png); 
background-size: cover, cover; 

• 而不上傳

• 沒有額外的html

• 我想加載應該比盒子陰影或線性漸變更快