更改背景圖像的不透明度

我有一個帶有文本塊的div元素和一個父div，我在其中設置了背景圖像。現在我想減少背景圖片的不透明度。請建議我如何做到這一點。更改背景圖像的不透明度

在此先感謝。

編輯：

我期待通過編輯HTML內容改變在blogger.com我的博客文章的樣子。 HTML代碼如下所示：

<div> 
//my blog post 
</div>

我試圖圍繞上述與div元素整個代碼，並設置不透明度每個格設置如下分別：

<div style="background-image:url("image.jpg"); opacity:0.5;"> 
<div style="opacity:1;"> 
//my blog post 
</div> 
</div>

但它無法正常工作。

來源

2012-09-26 Victor Mukherjee

使用'不透明度：0.5 //或something' –

哪個瀏覽器中測試你這嗎？ – bhatanant2

您正在測試哪個瀏覽器？和可能重複的http://stackoverflow.com/questions/637921/opacity-of-background-but-not-the-text –

沒有什麼叫背景不透明。不透明度應用於元素，其內容及其所有子元素。而這種行爲不能通過重寫子元素中的不透明度來改變。

孩子vs父母的不透明度一直是一個長期存在的問題，最常見的修復方法是使用rgba(r,g,b,alpha)背景顏色。但在這種情況下，由於它是一個背景圖像，該解決方案將無法工作。一種解決方案是將圖像生成爲具有圖像本身所需的不透明度的PNG。另一個解決方案是將孩子分開，並使其絕對定位。

來源

2012-09-26 16:19:20 techfoobar

不能直接使用的背景圖像的透明度，但你可以實現像這樣的東西這樣的效果：

http://jsfiddle.net/m4TgL/

HTML：

<div class="container"> 
    <div class="content">//my blog post</div> 
</div>

CSS：

.container { position: relative; } 

.container:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    bottom: 0; 
    left: 0; 
    right: 0; 
    z-index: 1; 
    background-image: url('image.jpg'); 
    opacity: 0.5; 
} 

.content { 
    position: relative; 
    z-index: 2; 
}

來源

2012-09-26 16:35:58

這真了不起。謝謝！ – veeTrain

應該接受答案！ – Carlos2W

我喜歡它 - 謝謝。唯一的是，我不認爲你可以通過編程來改變背景圖像 - 你必須將其硬編碼到css文件中... – Spock

-3

你可以用簡單的代碼來做到這一點：

filter:alpha(opacity=30); 
-moz-opacity:0.3; 
-khtml-opacity: 0.3; 
opacity: 0.3;

來源

2013-04-27 05:28:26

您可以創建幾個div的，做的是：

<div style="width:100px; height:100px;"> 
    <div style="position:relative; top:0px; left:0px; width:100px; height:100px; opacity:0.3;"><img src="urltoimage" alt=" " /></div> 
    <div style="position:relative; top:0px; left:0px; width:100px; height:100px;"> DIV with no opacity </div> 
</div>

我做了幾次......簡單而有效的...

來源

2015-03-18 20:29:22

如今，它可以做到這一點只需使用CSS屬性「background-blend-mode」。

<div id="content">Only one div needed</div> 

div#content { 
    background-image: url(my_image.png); 
    background-color: rgba(255,255,255,0.6); 
    background-blend-mode: lighten; 
    /* You may add things like width, height, background-size... */ 
}

它將背景顏色（這是白色，0.6不透明度）混合到背景圖像。瞭解更多信息here (W3S)。

來源

2016-11-01 19:09:37 Carlos2W

很好的回答！更清潔的解決方案，但不幸的是不能在IE上運行。 – tsvikas

@tsvikas在IE上無效。老實說，除非是保護數據，否則在編寫網頁時我已經不再考慮IE了。 :-P – progyammer

最乾淨的解決方案imho –

響應之前的評論，如果CSS是在你的php頁面而不是在CSS樣式表中，你可以通過「容器」例子中的變量來改變背景。

$bgimage = '[some image url]; 
background-image: url('<?php echo $bgimage; ?>');

來源

2017-04-27 20:03:18 basd

我所做的是：

<div id="bg-image"></div> 
<div class="container"> 
    <h1>Hello World!</h1> 
</div>

CSS：

html { 
    height: 100%; 
    width: 100%; 
} 
body { 
    height: 100%; 
    width: 100%; 
} 
#bg-image { 
    height: 100%; 
    width: 100%; 
    position: absolute; 
    background-image: url(images/background.jpg); 
    background-position: center center; 
    background-repeat: no-repeat; 
    background-size: cover; 
    opacity: 0.3; 
}

來源

2017-07-07 01:47:02

更改背景圖像的不透明度

回答

相關問題