Question

这是包含example

的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将支配整个图像。背景颜色和图像可以共存吗？

Answer 1

因为background属性一次设置所有背景属性。如果你跳过一些，它只是使用默认值因此background属性由以下子属性组成：

背景颜色
背景图像
背景重复
背景附件
背景位置

您可以通过在后台属性中发布它来一次性设置它（按照之前列出的顺序，您可以跳过任何属性）：

.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

了解更多信息

Answer 2

是的，你可以同时拥有两者。

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

尽管背景与图像网址呈现，但浏览器未呈现背景图像

2 个答案: