CSS来添加图片到文字

目前，我有我想要的样式这样的页面标题：CSS来添加图片到文字

<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（新的给我，所以我做错了什么），像这样：

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

来源

2015-07-10 Craig

你能提供你想要达到什么样的样本图像？ –

英文错误。我希望可以用CSS来做到这一点。是的，我可以修改CSS。 – Craig

用示例图像编辑。 – Craig

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

.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

来源

2015-07-10 04:09:36

我正在尝试这个，如果我使用'http：//'指向我的图像，它会起作用。我需要使用〜/ image/myimage.png，而当我使用它时，它会失败。 – Craig

删除'〜'已解决问题！谢谢。 – Craig

这里是你如何样式的所有标题与相同的图像：

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

来源

2015-07-10 03:39:16

您可以设置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;

来源

2015-07-10 03:39:52 JamieD77

有几种方法可以实现这一点。可以使用:before选择器，也可以将div的背景设置为您的图像，并使用填充将文本跨过。

来源

2015-07-10 03:40:17

试过了。我试图编辑我的问题。没有工作。你能发现一个问题吗？ – Craig

啊，但在内容中使用http。我的项目中不能使用文件吗？例如〜\ images \ image.png？ – Craig

是的，你不必去代码部分，你可以用css使用伪元素before这样做，因为你必须在元素之前插入它。

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

来源

2015-07-10 03:55:57

CSS来添加图片到文字

回答

相关问题