設置不透明度只背景圖片

我已經看過這個帖子裏面介紹瞭如何設置只母的背景圖像的不透明度的明確說明，而不會影響孩子的元素RGBA（）：HTML/CSS text background transparent but text not 設置不透明度只背景圖片

但是，我該怎麼辦設置背景圖像以及不透明度？本來，我用不透明像這樣（但孩子的元素過於影響）：

.content { 
    background-image: url('link/url/image.jpeg'); 
    opacity: 0.35; 
}

但看SO後上面鏈接後，我嘗試這樣做：

.content { 
    background-image: url('link/url/image.jpeg'); 
    background: rgba(255, 255, 255, 0.35); 
}

但它似乎像背景rgba（）值沒有做任何事情。我也試過：

.content { 
    background: rgba(255, 255, 255, 0.35) url('link/url/image.jpeg'); 
}

但是後來沒有顯示背景。

來源

2016-11-08 patrickhuang94

根據瀏覽器的要求，你可以看看丹尼爾在這篇文章中的答案：http://stackoverflow.com/questions/10422949/css-background-opacity – JanR

你不能應用不透明度：0;對其子女？ –

@ AllDani.com我認爲這會起作用，但在孩子身上設置「不透明度：0」不會影響它。 – patrickhuang94

嘗試了這一點：

.content::after { 
    content: ""; 
    background: url('link/url/image.jpeg'); 
    opacity: 0.5; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 
}

來源

2016-11-08 03:42:17 Derek

在你的情況下，背景顏色不能被看到，因爲圖像那張顏色，如果它不是透明不顯示它。

目前還沒有一個屬性只能爲背景圖像指定透明度。

如果您希望透明背景圖像在懸停時沒有任何效果或過渡，則可以直接使用.png格式的圖像並用透明度保存。

否則，您將需要在「位置：相對」和「溢出：隱藏」中使用內部圖像和另一個容器在「position：absolute」中使用文本或其他內容創建容器。通過這種方式，您只能將透明度分配給圖像，而不會影響其餘部分。

來源

2016-11-08 03:53:17 Sieen

你能詳細說說你的最後一段嗎？不是真的跟着你。 – patrickhuang94

設置不透明度只背景圖片

回答

相關問題