[英]CSS - How do I assign set background image for span based on local image url?
My setup is as follows. 我的设置如下。
1) CSS file (code below) resides in Stylesheets directory 1)CSS文件(下面的代码)位于Stylesheets目录中
2) HTML resides in same level as Stylesheets folder 2)HTML与Stylesheets文件夹位于同一级别
3) Images folder resides in same level as Stylesheets 3)Images文件夹与Stylesheets位于同一级别
All above three elements 2 folders, 1 html reside in the same level on the local directory. 以上三个元素全部2个文件夹,其中1个html位于本地目录的同一级别。
Question 题
How do I get the image url for local file residing in Images directory, preferably using a path without leading double dots? 如何获取驻留在Images目录中的本地文件的图像URL,最好使用没有前导双点的路径?
span.check
width: 14px
height: 14px
border: 2px solid black
display: inline
position: absolute
top: $spacing
content: url(Images\icon_check@2x.png)
background-size: 14px 14px
background-repeat: no-repeat
EDIT Working CSS - Sass 编辑工作CSS-Sass
span.check
width: 14px
height: 14px
border: 2px solid black
display: inline
position: absolute
top: $spacing
z-index: 1
background-image: url('../Icons/icon_check@2x.png')
background-size: 14px 14px
background-repeat: no-repeat
Your image will not display because the content property is for the :before
and :after
pseudo elements. 您的图片将不会显示,因为content属性是用于:before
和:after
伪元素的。 You may also find that using a background image gives you more flexibility for sizing and so on. 您可能还会发现,使用背景图像可为您提供更大的尺寸调整灵活性等。 More here on CSS-Tricks . 更多关于CSS-Tricks的信息 。
The path to your image can be accomplished by going down a directory (not sure why you want to avoid that) or by a leading slash for a relative path from the root directory. 可以通过向下目录(不确定为什么要避免该目录)或根目录中相对路径的前导斜杠来完成映像的路径。
You can easily get image with 您可以轻松获得图像
background-image: url('Images/icon_check@2x.png');
You can Check yourself :) 你可以检查一下自己:)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.