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

我想通过CSS加载背景图像。我的CSS加载了图像的例外。如何在WordPress中通过CSS加载图像

我试图通过CSS加载图像文件作为雪碧。

问题：

该图像不通过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; 
}

来源

2016-12-19 Gavin Reynoldson

什么是你所面对的具体问题，你可以提供一个链接？ –

尝试在行尾添加一个'！important' – sebasaenz

您可以在wordpress图库中看到图片的url /路径。你有没有从那里走你的路？ – theoretisch

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

<div class="icon"></div>

我建议创建你的主题的图像目录，并调用它了，而不是上传，特别是如果精灵图像文件与你的主题一致。但是，为了回答你的问题：

要想从上传图像做到这一点：“../../../wp-content/uploads/2016/12/Sprite.png”

来源

2016-12-19 16:22:44

引用样式表中的主题图像：http://wordpress.stackexchange.com/questions/188725/how-to-reference-a-theme-image-in-a-stylesheet –

这也不起作用。 –

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

在你的CSS

部分背景图像没有结束标记。它应该是这样的。背景图像：网址（“”）;

秒让我给你看一个例子。这里是演示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; 
 
}

<span><i class="icon"></i>TEST</span>

来源

2016-12-19 16:46:55

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

回答

相关问题