css在同一個div中有背景顏色，文本和圖像

Question

所以我有一個盒子，我需要顯示一些文本，紅色背景顏色，並在框的右側有一個圖像。

這個想法是應該優先考慮文本，背景顏色應該仍然是紅色。

這是一個示例，但它會覆蓋背景顏色：

.test {
  background-color: #e64e56;;
  box-shadow: 3px 3px 5px darkGray;
  color: white;
  background: url(http://thumb10.shutterstock.com/thumb_small/536008/103572833/stock-photo-small-flower-isolated-on-white-background-103572833.jpg) no-repeat top right;

}

http://jsbin.com/axohoc/1/edit

Answer 1

你是說這個嗎？

.test {
  box-shadow: 3px 3px 5px darkGray;
  color: white;
  background: #e64e56 url(http://thumb10.shutterstock.com/thumb_small/536008/103572833/stock-photo-small-flower-isolated-on-white-background-103572833.jpg) no-repeat top right;
}

您可以單獨定義background-color ， background-image ， background-repeat和background-position ，也可以使用快捷方式background 。 使用后者時，它將覆蓋您設置的特定規則，在本例中為background-color

這是一個例子，編輯http://jsbin.com/axohoc/7/edit

在這里，您可以了解速記屬性的具體細節，以及不同的特定背景屬性： http ： //www.w3schools.com/css/css_background.asp