使用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;}