使用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;
}