CSS将图像添加到文本 [英] CSS to add image to text

问题描述

此刻，我有一些页面标题，其样式如下:

At the moment, I have page headings which I want to style like this:

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

但是我被要求在文本左侧添加一个小图像.

But I have been asked to add a small image to the left of the text.

因此，我可以对每个页面标题进行

So, I could go an edit every page header:

<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的文本左侧(图像和文本之间(缺少)间隙)?

But I was hoping I could edit the CSS to accomplish this for me. Is there a way I can add an image to the CSS, left of the text (With a (missing) gap between the image and the text)?

我尝试在CSS中使用:: before(对我来说是新的，所以我做错了什么)，如下所示:

I have attempted the ::before in the css (New to me, so I am doing something wrong), like this:

.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失败.

But all that happens is I get a huge gap before the heading. But if I use http:// to reference the image, it works. Using ~\images\myimage.png fails.

推荐答案

您尝试使用以下代码可能会为您提供帮助:

you try with code below maybe can help you:

.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');
}

工作演示

这篇关于CSS将图像添加到文本的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！