使背景圖像透明而不更改div的其餘部分

Question

我有一個背景顏色和背景圖像的div。該div叫這個類：

.cakebg { 
    background-color: #F8BBD0; 
    background-image: url(img/cake.png); 
    background-size: 25%; 
    background-position: right top; 
    background-repeat: no-repeat; 
} 

我想只使圖像有點透明。我試過這個：

.cakebg { 
    background-color: #F8BBD0; 
    background-image: url(img/cake.png); 
    opacity: 0.6; 
    background-size: 25%; 
    background-position: right top; 
    background-repeat: no-repeat; 
} 

但是，這使整個div透明。

所以，我想這一點：

.cakebg { 
    background-color: #F8BBD0; 
    background-image: url(img/cake.png) opacity(0.6); 
    background-size: 25%; 
    background-position: right top; 
    background-repeat: no-repeat; 
} 

但是，這使得圖像完全消失。這可以做到嗎？

Answer 1

你試圖在單個元素上做什麼是不可能的，但是有很多方法可以用很少的額外努力來做同樣的事情。可能最好的辦法是向.cakebg元素添加一個額外的子元素，其尺寸相同，只有背景圖片和不透明度。如：

.cakebg .child-element { 
    height: 100%; 
    width: 100%; 
    background-image: url(img/cake.png); 
    opacity: 0.6; 
} 

如果您試圖保持標記清潔，您甚至可以將其添加爲僞元素。比如下面：

.cakebg:after { 
    content: ""; 
    height: 100%; 
    width: 100%; 
    background-image: url(img/cake.png); 
    opacity: 0.6; 
} 

如果沒有這些方法的工作，不得已可編輯圖像已經不透明度從您喜愛的編輯軟件出爐英寸希望這些方法中的一些可能會有所幫助！

Answer 2

沒有CSS屬性background-opacity，但是你可以通過插入一個具有常規不透明度的僞元素和它後面的元素的確切大小來僞造它。

.cakebg { 
background-color: #F8BBD0; 
background-size: 25%; 
position: relative; 
} 

.cakebg::after { 
    content: ""; 
    background: url(img/cake.png); 
    opacity: 0.5; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 
} 

或者你可以簡單地使用trasparent png圖片作爲背景

Answer 3

沒有CSS屬性，使剛剛背景透明，但你可以通過元素的大小相同插入一個僞元素假的在它後面並改變這個的不透明度。

.cakebg { 
    background-color: #F8BBD0; 
    background-size: 25%; 
    background-position: right top; 
    background-repeat: no-repeat; 
} 

.cakebg::after { 
    content: ""; 
    background-image: url(img/cake.png); 
    opacity: 0.5; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    position: absolute; 
    z-index: -1; 
} 

請注意，這個問題已經被問很多時候，read here例如。