css - 通过CSS将图像添加到文本左侧

标签 css

如何通过 css 将图像添加到某些文本?

我有这个:

<span class="create">Create something</span>

我想使用 css 在其左侧添加一个 16x16 图像。这是可能的还是我应该像这样手动添加此图像:

<span class="create"><img src="somewhere"/>Create something</span>

我宁愿不必手动更改所有位置,这就是我想通过 css 进行更改的原因。

谢谢!

最佳答案

.create
{
background-image: url('somewhere.jpg');
background-repeat: no-repeat;
padding-left: 30px;  /* width of the image plus a little extra padding */
display: block;  /* may not need this, but I've found I do */
}

尝试填充和可能的边距,直到获得所需的结果。您还可以使用“background-position”或完全定义“background”( link to w3 ) 来调整背景图像的位置(*向 Tom Wright 致敬)。

关于css - 通过CSS将图像添加到文本左侧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/735394/

相关文章:

HTML 边距和填充异常行为

html - 如何在不使用最大宽度的情况下垂直对齐标签?

html - 大字在手机 View 中显示错误

html - 背景图片没有响应

css - Footable:更改手机屏幕中的行位置

javascript - Chrome 中消失的图像

javascript - Vue 3 类与变量的绑定(bind)是否需要内联?

html - 下拉菜单很难保持打开状态

html - 如何用CSS划分内容的偶数、奇数?

javascript - 单击按钮后显示新字段