4

我必须设置所有 h1 标签的样式，以便在 h1 文本之前和之后有一个图像。

我以前知道如何添加图像，但不知道如何同时添加。

CSS（样式 h1 在文本之前有图像）

h1 {
        background-image: url('images/h_ltr.png');
        background-position: left center;
        background-repeat: no-repeat;
        text-align: center;
        font-size: 22px;
        font-weight: bold;
        color: #5d5d5d;
    }
4

3 回答 3

13

您可以使用:before和:aftercss 选择器。

h1:before {
    background-color: green;
    padding: 0 20px;
    content: " ";
}
h1:after {
    background-color: red;
    padding: 0 20px;
    content: " ";
}
<h1>Test</h1>

于 2013-06-26T14:06:41.183 回答
2

您还可以使用多个背景图像。在此示例中，我为左侧、中间和右侧背景图像设置了背景图像：

h1, h2, h3, h4, h5, h6 {
    background-image: url("images/heading-bg-left.png"), url("images/heading-bg-right.png"), url("images/heading-bg-center.png"); /* set each bg image */
    background-position: left center, center center, right center; /* set position of each bg image */
    background-repeat: no-repeat, no-repeat, repeat-x; /* set repeat of each bg image */
    padding: 0 92px; /* 92px is the width of my left and right bg images */
    height: 120px; /* 120px is the height of each bg image */
    line-height: 120px; /* ditto */
}

该代码是相当不言自明的，但基本上我已经使用了三个background-images 和三个background-positions 和三个background-repeats。

请注意，图像以相反的顺序呈现。因此，在我的示例中，左右图像将绘制在中心图像之上。

于 2015-02-24T19:43:11.873 回答
0 
<style>
.container{
    width:900px;
    margin:0 auto;
    position:relative;
    overflow:hidden;
    text-align:center;
}
h1{
    font-size:20px;
    display:inline-block;
    position:relative;
    padding:0 40px;
}
h1:after{
    height:1px;
    position:absolute;
    content:"";
    background:green;
    top:10px;
    width:500%;
    right:-500%;
}
h1:before{
    height:1px;
    position:absolute;
    content:"";
    background:red;
    top:10px;
    width:500%;
    left:-500%;
}


</style>

<div class="container">
     <h1>1</h1>
</div>
于 2015-05-26T20:43:42.210 回答