css - 带有css的div中的图像放置

Question

对于我正在制作的网站，我必须创建以下块。

我有以下 CSS，当与下面的 HTML 一起使用时，它会创建一个带有圆边和阴影的白框。

<style type="text/css">
    .stripeblock {
        width: 310px;
        border-radius: 12px;
        background-color: #fff;
        padding: 10px;
        box-shadow: 0 8px 6px -6px black;
    }
</style>

<div class="stripeblock">
    <h1>Just some title</h1>
    <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to...</p>
</div>

唯一缺少的是绿色水平条纹，我尝试了几件事，但无法正确插入。
我希望它通过 CSS 包含在内，而不是 div 中的单独元素。
这可能吗？

Answer 1

您完全可以做到这一点，无需任何额外的图像或标记。

只需使用 ':before' 伪元素来设置块的样式并将其放置在需要的位置。

试试这个：

.stripeblock:before {
    background: #c8d300;
    content: "";
    display: block;
    height: 7px;
    position: absolute;
    top:0;
    left: 20px;
    width: 125px;   
}

并确保您添加position: relative;到块.stribeblock的:before;位置正确。

.stribeblock {
    position: relative;
}

在这里查看结果：http: //jsfiddle.net/qVFeT/

Answer 2

好吧，用背景图片来做

.stripeblock {
    width: 310px;
    border-radius: 12px;
    /*background-color: #fff;*/
    background:#fff url('some-rectangular-green-image.gif') no-repeat 0 0;
    padding: 10px;
    box-shadow: 0 8px 6px -6px black;
}