儘管背景不是瀏覽器呈現與圖像的URL背景圖像被渲染

這裏plunker是我的CSS

.test_background { 
    width: 100%; 
    height: 100px; 
    padding: 30px; 
    background-color: #550000; 
    display: block; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: 40px; 
} 
.circular { 
    width: 300px; 
    height: 300px; 
    border: 3px solid #FFF; 
    border-radius: 150px; 
    -webkit-border-radius: 150px; 
    -moz-border-radius: 150px; 
    background: url(http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg) no-repeat; 
    background-position: center; 
    background-size: 100% 70%; 
    margin-left: auto; 
    margin-right: auto; 
    margin-top: -105px; 
    display: block; 
}

我們看到第一個背景顏色滲入我的圖像（因爲我不想改變圖像的大小），我添加了另一種背景顏色。

但是，如果我改變.circular的background到background-image而在另一個background-color第二background-color增加將主導整個圖像。背景顏色和圖像可以共存嗎？

來源

2015-09-26 Kevin

是的，你可以有兩個。

background: #550000; url(http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg) no-repeat;

來源

2015-09-26 23:28:10 user2684452

那麼，爲什麼指定圖像和顏色相互覆蓋？ – Kevin

它不應該如果你在你的.circular div結合這兩個。只需在需要的地方添加填充物，並更改形狀和大小以適應您的需求。 – user2684452

@Kevin因爲你在那裏使用了錯誤的屬性，所以你應該使用'background-image'來代替url – Nagh

因爲background屬性一次設置所有背景屬性。如果你跳過一些，它只是使用默認值。
所以background屬性包括一個以下子屬性的：

背景色
背景圖像
背景重複
背景附件
背景位置

您可以通過在背景屬性（in或）中發佈它來一次性設置它明鏡像之前上市，並且你可以跳過任何屬性）：

.circular{ 
    background: #550000 url("http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg") no-repeat scroll center; 
}

或由單獨的屬性做一樣的：

.circular{ 
    background-color: #550000; 
    background-image: url("http://cdn.sheknows.com/articles/2013/04/Puppy_2.jpg"); 
    background-repeat: no-repeat; 
    background-attachment: scroll; 
    background-position: center; 
}

你可以閱讀更多的http://www.w3schools.com

來源

2015-09-26 23:47:19 Nagh

儘管背景不是瀏覽器呈現與圖像的URL背景圖像被渲染

回答

相關問題