使用css将内联图像添加到标题

Question

我在我的css文件中有一些标题布局，如h1和h2。有时我需要一个简单的标题，例如：<h1>Most readed</h1>，有时我需要将图像添加到标题的开头，例如：。我如何使用课程来做到这一点，如<h1 class="with_image_1">？

Answer 1

这样做是设置图像作为background-image并添加填充到文本迁出的方式，所以假设你的形象的最好办法是50像素宽：

.with_image_1 { 
background: url("/path/to/image.png") left no-repeat transparent; 
padding-left: 50px; 
} 

然后，您可以乱用填充和图像放置得到一切一字排开很好

Answer 2

你只是在你的CSS使用背景图片：

.with_image_1 {background-image: url(some/image/path.png); 
       width:100px; height:100px;} 

游马Ÿ想太多别的移动文本就会显示在您的闪亮图像的顶部...要做到这一点放在h1标签中的文本的跨度，然后转向跨度关闭屏幕：

<h1 class="with_image_1"><span>Title</span></h1> 

.with_image_1 span {position:relative; left:-2000px;}