如何在 WordPress 中通过 CSS 加载图像答案

【问题标题】：How to load image via CSS in WordPress如何在 WordPress 中通过 CSS 加载图像
【发布时间】：2016-12-20 03:16:15
【问题描述】：

我正在尝试通过 CSS 加载背景图片。我的 CSS 加载除了图像。

我正在尝试通过 CSS 将图像文件加载为 Sprite。

问题：

图片不通过 CSS 加载。如何指定文件路径以通过 CSS 加载图像？

我已经为图像尝试了许多不同的文件路径。图像存储在 WordPress 媒体库中。文件路径为：

wp-content/uploads/2016/12/Sprite.png

我使用的 CSS 是：

.icon {
width: 70px;
height: 70px;
background-image: url("wp-content/uploads/2016/12/Sprite.png");
display: inline-block; 
margin: 0 10px 0 0;
}

【问题讨论】：

您遇到的具体问题是什么，能否提供链接？
尝试在行尾添加!important
您可以在 wordpress 库中查看图片的 url/路径。你有你的路径吗？
文件路径如上。
@sebasaenz 添加 !important 应该是最后的手段，我认为。

标签： html css wordpress

【解决方案1】：

在您的 css 部分背景图像中没有结束标记。它应该是这样的。背景图像：url（''）；

第二个例子。这是演示wordpress 网站。在此站点中，这里是 logo 。如果我们使用此徽标作为您的图标

 .icon {
width: 70px;
height: 70px;
background-image: url("https://mediashark.com.au/wp-content/uploads/2016/09/logo-200-1.png");
display: inline-block; 
margin: 0 10px 0 0;
}

&lt;span&gt;&lt;i class="icon"&gt;&lt;/i&gt;TEST&lt;/span&gt;

【讨论】：

【解决方案2】：

.icon {
width: 50px;
height: 50px;
background-image: url('http://placehold.it/100x100');
background-position: 0 0;
}

&lt;div class="icon"&gt;&lt;/div&gt;

我建议在您的主题中创建一个图像目录并在那里调用它而不是上传，特别是如果精灵图像文件与您的主题一起使用。但要回答你的问题：

要从上传中获取图像，请执行以下操作：'../../../wp-content/uploads/2016/12/Sprite.png'

【讨论】：

在样式表中引用主题图像：wordpress.stackexchange.com/questions/188725/…
我刚刚注意到您正在调用一个精灵，因此它由多个图像组成。这意味着当您调用精灵时，您还必须调用坐标，以便背景属性知道要调用精灵图像的哪个部分。还添加“background-repeat: no-repeat”，所以背景只显示一次精灵。这里的例子：css-tricks.com/css-sprites 所以你需要设置 background-position: 0 0;例如然后设置高度和宽度，那些H和W尺寸基于“背景位置”设置。