CSS：背景顏色的背景圖像

我有面板，如果這個面板被選中（點擊它），我會將其着色爲藍色。另外，我在該面板上添加了一個小符號（.png圖片），表示所選面板以前已被選中。CSS：背景顏色的背景圖像

因此，如果用戶看到例如10個面板，其中4個有這個小標誌，他知道他已經點擊過這些面板。迄今爲止這項工作很好。現在的問題是我無法顯示小號，並且同時使面板變成藍色。

我將面板設置爲藍色，css爲background: #6DB3F2;，背景圖爲background-image: url('images/checked.png')。但似乎背景顏色在圖像上方，所以你看不到標誌。

因此有可能爲背景顏色和背景圖像設置z-index es？

2011-11-19 mkn

185

您需要使用完整的屬性名稱每個：

background-color: #6DB3F2; 
background-image: url('images/checked.png');

或者，你可以使用背景速記，並指定所有在同一行：

background: #6DB3F2 url('images/checked.png');

來源

2011-11-19 16:05:37 dodger

首屆方法並沒有爲我工作。第二種簡寫法完美地工作。 –

第二個人也爲我工作。謝謝史蒂夫。 – starkeen

第一個也沒有爲我工作。第二個。 – felwithe

非常有趣的問題，避風港還沒有看到它。這段代碼適合我。在Chrome和IE9

<html> 
<head> 
<style> 
body{ 
    background-image: url('img.jpg'); 
    background-color: #6DB3F2; 
} 
</style> 
</head> 
<body> 
</body> 
</html>

來源

2011-11-19 16:07:04

-8

body 
{ 
background-image:url('image/img2.jpg'); 
margin: 0px; 
padding: 0px; 
}

來源

2013-08-13 11:02:24

測試它對於我這個解決方案沒有奏效：

background-color: #6DB3F2; 
background-image: url('images/checked.png');

而是將其工作的另一種方式：

<div class="block"> 
<span> 
... 
</span> 
</div>

的CSS ：

.block{ 
    background-image: url('img.jpg') no-repeat; 
    position: relative; 
} 

.block::before{ 
    background-color: rgba(0, 0, 0, 0.37); 
    content: ''; 
    display: block; 
    height: 100%; 
    position: absolute; 
    width: 100%; 
}

來源

2014-07-24 21:57:00

感謝代碼Francisc！正如他所說，加入背景顏色和圖像也不能解決我的問題。有了這些幫助和我的代碼的小改動，我設法解決了這個問題。 – Mikel

您還可以使用短招用圖片和文字顏色都像這樣： -

body { 
    background:#000 url('images/checked.png'); 
}

來源

2014-08-16 20:50:11

-2

<li style="background-color: #ffffff;"><a href="/<%=logo_marka_url%>"><img border="0" style="border-radius:5px;background: url(images/picture.jpg') 50% 50% no-repeat;width:150px;height:80px;" src="images/clearpixel.gif"/></a></li>

其他樣品盒中心圖像和背景顏色

1.首先clearpixel修復圖像區域 2.樣式中心圖像區域框 3.li背景或div顏色樣式

來源

2014-12-27 07:03:34 alpc

如果有其他合理的選項，則內聯CSS不適用。 – Smittles

基於MDN Web Docs您可以設置多個背景usi ng速記background財產或個人財產除background-color。你的情況，你可以使用linear-gradient這樣一招：在參數

background-image: url('images/checked.png'), linear-gradient(to right, #6DB3F2, #6DB3F2);

的第一個項目（圖像）將在上面放。第二項（彩色背景）將放在第一項下面。您也可以單獨設置其他屬性。例如，設置圖像大小和位置。這種方法的

background-size: 30px 30px; 
background-position: bottom right; 
background-repeat: no-repeat;

好處是，你可以實現它的其他情況下很容易，例如，你想使藍色覆蓋具有一定透明度的圖像。

background-image: linear-gradient(to right, rgba(109, 179, 242, .6), rgba(109, 179, 242, .6)), url('images/checked.png'); 
background-size: cover, contain; 
background-position: center, right bottom; 
background-repeat: no-repeat, no-repeat;

分別設置各個屬性參數。由於圖像放置在顏色疊加層下，因此其屬性參數也放置在顏色疊加參數之後。

來源

2017-12-24 21:16:43 lukibsubekti

如果你想在後臺生成一個黑色的影子，你可以使用如下：

background:linear-gradient(rgba(0, 0, 0, 0.5) 100%, rgba(0, 0, 0, 0.5)100%),url("logo/header-background.png");

來源

2018-01-15 17:12:53

CSS：背景顏色的背景圖像

回答

相關問題