CSS：如何在背景图像下添加背景颜色（相同颜色）

Question

我想在div中添加背景颜色，在同一个div上，在底部我想要背景图像。但是当背景图像开始时，我希望背景颜色停止。这是一个图像示例：

Answer 1

以下是使用纯 CSS 的示例 - 无需图像。只有一个 div 才能实现此目标 - 不需要两个！

您可以应用您想要的任何background-color，而不必担心它不适用于图像。

尝试更改演示中的background-color！

jsFiddle demo

<强> HTML

<div class="arrow">BUTTON</div>

<强> CSS

.arrow {
    position: relative;
    background: #000000;
    width:100px;
    height:50px;
    color:white;
}
.arrow:after {
    top: 100%;
    border: solid transparent;
    content: " ";
    height: 0;
    width: 0;
    position: absolute;
    pointer-events: none;
}

.arrow:after {
    border-color: rgba(0, 0, 0, 0);
    border-top-color: #000000;
    border-width: 10px;
    left: 50%;
    margin-left: -10px;
}

Answer 2

使用嵌套div：

<div class="button">
    Text
    <div class="arrow">
    </div>
</div>

和

.button {
   background-color: black;
}

.arrow {
   background-image: ...
}

当然，你也必须调整CSS中箭头图像的位置。

或者，您可以使用:after插入一个伪元素来表示箭头。

Answer 3

我使用CSS解决了它，使用了2张背景图片。

我做了一个更容易理解的插图：

background-image: url(http://www.yoursite.com/top_image.png), url(http://www.yoursite.com/bottom_image.png); background-repeat: repeat-x, no-repeat; background-position: left top, center top;