html - CSS：如何在其下添加带有背景图像的背景颜色（相同颜色）

Question

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

Answer 1

这是一个使用纯CSS的示例- 不需要图像。只需要一个 div就可以实现这一点 -不需要两个！

您可以应用background-color您想要的任何东西，而不必担心它不会应用到图像上。

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

jsFiddle 演示

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;