css中background-image背景图片路径设置

web项目中经常会用到background-image:url()，很多小伙伴不知道该怎么写需要的图片路径。

在此之前先要知道几个重要的东东：

/ 项目根目录这个不用多说，就是程序最上层的目录

假设有项目结构路径如下：

在style.css文件中为某个html元素设置background-image，所使用的图片为shadow_light.png，那么怎么设置路径呢？

那么可以这样设定图片路径：

style.css文件所在的目录（即当前目录）下的image文件夹中的shadow_light.png图片，也就是./image/shadow_light.png。

style.css文件的父级目录（style.css所在的目录是Content，所以它的父级目录就是Content所在的目录）下的Content文件夹中的image文件夹中的图片shadow_light.png，也就是../Content/image/shadow_light.png。

根目录下的Content文件夹中的image文件夹中的图片shadow_light.png，也就是/Content/image/shadow_light.png。

转载于:https://www.cnblogs.com/wangyihome/p/8810920.html

css中background-image背景图片路径设置相关推荐

CSS中如何实现背景图片透明并且固定和文字不透明效果
设置背景图片的透明度,并且该背景图片不随鼠标滚动而移动,我们可以使用滤镜filter中的透明度设置opacity,并使用伪类before和定位至于opacity的作用:转化图像的透明程度.值定义转换 ...
CSS中如何制作背景图片半透明但内容不透明的效果
CSS中如何制作背景半透明但内容不透明的效果一.利用伪元素:before添加一个半透明的背景,并利用position定位属性,设置z-index值为-1,显示在下层. css: <style& ...
html5中背景图片的大小怎么调,css中怎么改变背景图片大小？
在CSS中,想要改变背景图片的大小,可以通过设置background-size属性来实现.下面本篇文章就来给大家介绍一下使用background-size属性改变背景图片大小的方法,希望对大家有所帮助 ...
vue打包后CSS中引用的背景图片不显示问题
vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件修改成为如下所示内容: 添加红框中的内容即可 ...
CSS中background的背景属性标准写法
单个属性的写法书写格式: background-color:#CCCCCC; /*背景颜色*/background-image: url(sample.gif); /*背景图片*/backgroun ...
css中background属性引入图片url()中地址
网络图片: background: url(https://58d.oss-cn-hangzhou.aliyuncs.com/website2022/shoes.png); 本地图片: 1.项目内部: ...
webpack如何设置html中img路径和css中背景图片路径区别开
在使用webpack过程中,打包后发现html中img路径是: <img src="img/01.jpg" alt="标题图片" /> 但是在mai ...
css中背景图片路径问题
1.不要给背景图片路径加引号将background:url("xxx.gif")改为background:url(xxx.gif) 因为对于部分浏览器加引号反而会引起错误. 2. ...
vue样式中背景图片路径_vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了如一个简单css语句 .all_bg { background: url(../imag ...

css中background-image背景图片路径设置

css中background-image背景图片路径设置相关推荐

最新文章

热门文章