怎样把标题元素作为背景图片

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