Question

我目前遇到背景颜色和背景图片的问题。我正在进行的项目必须同时使用颜色和背景图像。例如，图像将填满div的一半，颜色将填满另一半。

现在通常这样做我会使用下面的CSS：

background: blue url('img.png) right no-repeat;

这很有效，但在这个项目中，用户可以使用CMS系统自行设置背景图像。因此，为了应用背景图像，我在每个div上使用内联样式，然后div在外部样式表中有自己的颜色，如此。

stylesheet.css中

.bg-color {
    background: blue;
}

index.html

<div class="bg-color" style="background:url('img.png') right no-repeat;">

</div>

现在，当这样做时，背景图像会覆盖所有内容，有没有办法让我实现动态寻找的结果？

由于

Answer 1

style=上的背景速记的默认值为transparent，并且会覆盖您在课程bg-color中提供的颜色。尝试：

.bg-color {
    background-color: blue !important;
}

Answer 2

在CSS中尝试使用：

.bg-color {
    background-color: blue;
}

而不仅仅是background: blue;。

Answer 3

这是solution

您可以使用速记符号来合并两个背景。

<div style="background: url(http://scienceblogs.com/gregladen/files/2012/12/Beautifull-cat-cats-14749885-1600-1200.jpg) no-repeat, green;
 background-size: 50%;"></div>

与背景颜色的动态背景图象

3 个答案: