Question

目前，我有页面标题，我想这样的样式：

<div class="page_header">Categories</div>

我的风格如下：

.page_header {
    font-family: markerfelt-thin-webfont;
    text-shadow: 1px 1px 2px #000000;
    font-size: x-large;
    color: #bbbb75;
    padding-bottom: 10px;
}

但我被要求在文字左侧添加一个小图片。

所以，我可以编辑每个页面标题：

<div class="page_header"><img src="http://www.clker.com/cliparts/W/e/S/a/V/m/push-pin-th.png" />Categories</div>

但是我希望我可以编辑CSS来为我完成这个。有没有办法可以将图像添加到文本左侧的CSS中（图像和文本之间有（缺少）间隙）？

我在css中尝试了:: before（对我来说是新的，所以我做错了），像这样：

.page_header {

    font-family: markerfelt-thin-webfont;
    text-shadow: 1px 1px 2px #000000;
    font-size: x-large;
    color: #bbbb75;
    padding-bottom: 10px;
}
.page_header::before{
    content: url('~/images/pushpin.png');
}

但所有这一切都是在标题之前我得到了巨大的差距。但是，如果我使用http：//来引用图像，它就可以了。使用〜\ images \ myimage.png失败。

Answer 1

您尝试下面的代码也许可以帮助您：

.page_header {

    font-family: markerfelt-thin-webfont;
    text-shadow: 1px 1px 2px #000000;
    font-size: x-large;
    color: #bbbb75;
    padding-bottom: 10px;
    position:relative;
    padding: 30px 0 0 120px;
}
.page_header::before{
    position:absolute;
    left:0;
    top:0;
    content:url('http://www.clker.com/cliparts/W/e/S/a/V/m/push-pin-th.png');
}

Working Demo

Answer 2

以下是如何使用相同的图像设置所有标题的样式：

.page_header {
    background: url('http://www.healthylivingjunkie.com/wp-content/uploads/2014/10/bulletPoints.png') left center no-repeat;
    background-size: 14px;
    font-family: markerfelt-thin-webfont;
    text-shadow: 1px 1px 2px #000000;
    font-size: x-large;
    color: #bbbb75;
    margin-bottom: 10px;
    padding-left: 20px;
}

<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>

Answer 3

有几种方法可以实现这一目标。通过使用:before选择器或将div的背景设置为图像并使用填充推送文本。

Answer 4

您可以设置div的背景图像并填充左侧以将文本移动到

padding-left:120px; // width of image + spacing
background: url("http://www.clker.com/cliparts/W/e/S/a/V/m/push-pin-th.png") no-repeat;

Answer 5

是的，您不必转到代码部分，您可以使用伪元素 before使用css执行此操作，因为您必须在元素之前插入它。

.page_header:before{
    content:url('http://www.clker.com/cliparts/W/e/S/a/V/m/push-pin-th.png'); 
}

<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>
<div class="page_header">Categories</div>

CSS将图像添加到文本中

5 个答案: