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來添加圖片到文字

回答

相關問題