怎樣把標題元素作爲背景圖片

Question

我使用CSS和嘗試旁邊子彈得到什麼樣子的標題子彈點：

這是確切的形象我想。

我做了什麼：

h1,h2,h3 { 
    background-image: url("the image link goes here"); 
} 

得到任何人我已經試過移動它和任何東西的想法，但它只是沒有發生。乾杯。

Answer 1

應設置background-position以及同時還爲標題元素的左填充，以推動文本向右：

h1, h2, h3 { 
    background: url("the image link goes here") 0 center no-repeat; 
    padding-left: 15px; /* change this to fit your needs */ 
} 

請注意，我用的background財產的簡寫。

您也可以做到這一點通過使用::before僞元素創建矩形和位置的標題中，如下所示：

h1:before, 
h2:before, 
h3:before { 
    content: '■ '; 
    position: relative; 
    bottom: .1em; 
    color: #666; 
} 

WORKING DEMO