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。

css中background-image背景图片路径设置的更多相关文章

  1. vue webpack打包后.css文件里面的背景图片路径错误解决方法

    资源相对引用路径 问题描述 一般情况下,通过webpack+vuecli默认打包的css.js等资源,路径都是绝对的. 但当部署到带有文件夹的项目中,这种绝对路径就会出现问题,因为把配置的static ...

  2. vue打包后CSS中引用的背景图片不显示问题

    vue项目中,在css样式中引用了一张背景图片,开发环境下是可以正常显示,build之后背景图片不显示. 解决方法: 找到build/utils.js文件 修改成为如下所示内容:  添加红框中的内容即 ...

  3. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  4. css中background背景属性概述

    background:url(背景图片路径) no-repeat;/*不重复默认在左上方*/ background:url(背景图片路径) no-repeat center;/*不重复背景图片中间显示 ...

  5. CSS中如何使用背景样式属性,看这篇文章就够用了

    css背景样式属性介绍 背景样式就是自定义HTML标签的背景颜色或背景图像. 背景属性说明表 属性名 属性值 描述 background-color #f00.red.rgb(255,0,0) 设置背 ...

  6. Bootstrap css背景图片的设置

    一. 网页中添加图片的方式有两种 一种是:通过<img>标签直接插入到html中 另一种是:通过css背景属性添加 居中方法:水平居中的text-align:center 和 margin ...

  7. jQuery获取和设置disabled属性、背景图片路径

    之前对于这个独特的disabled属性获取和设置很混乱,今天项目中用到了,用attr不能实现,于是多次试验得出: 获取disabled属性用prop $("#basic_key") ...

  8. css 背景图片路径问题

    背景图片路径找寻失败问题 1.加~ background-image: url("~@/assets/login/login-bg.png"); background-size: ...

  9. vue上线后,背景图片路径错误

    build 下的utils.js中添加配置 if (options.extract) { return ExtractTextPlugin.extract({ use: loaders, public ...

随机推荐

  1. Java学习笔记之log4j与commons-logging<转>

    Java学习笔记之log4j与commons-logging<转> (2011-02-16 11:10:46) 转载▼ 标签: 杂谈 分类: 技术学习之其他 Logger来自log4j自己 ...

  2. AJPFX总结List的三个子类的特点

    ArrayList:                        底层数据结构是数组,查询快,增删慢.                        线程不安全,效率高.              ...

  3. leetcode410 Split Array Largest Sum

    思路: dp. 实现: class Solution { public: int splitArray(vector<int>& nums, int m) { int n = nu ...

  4. 搭建SSM框架(聚合项目)

    parents 父工程 pom  base用户权限 jar   wms业务 jar app帮助管理 war1. parents的pom.xml文件 1.1 maven servlet3.1.0 1.2 ...

  5. 在服务端C#如何利用NPOI构建Excel模板

    目前本人接触过两种模板导出的方式:(1)C#利用NPOI接口制作Excel模板,在服务端用数据渲染模板(2)在前端利用前人搭建好的框架,利用office编写xml制作模板,在客户端进行数据的渲染,导出 ...

  6. Android原生系统API自带dp、px、sp单位转换

    Android系统中自带的Api中可以使用TypedValue进行单位转换 1,调用系统api转换单位 // 获得转换后的px值 float pxDimension = TypedValue.appl ...

  7. https为数据传输保驾护航

    为什么要使用https 谷歌官网已宣布,今年7月起,Chrome浏览器的地址栏将把所有HTTP标示为不安全网站. 在客户端与服务器数据传输过程中,http协议传输是不安全的,一般情况下,http协议的 ...

  8. RFS自动化测试(一)

    RFS 即 Robot Framework + Selenium RFS 的安装 1. python https://www.python.org/ RF框架是基于python的,所以要先安装有pyt ...

  9. casting in C++

    这是2013年写的一篇旧文,放在gegahost.net上面 http://raison.gegahost.net/?p=39 February 20, 2013 casting in C++ Fil ...

  10. 腾讯AI开放平台的接口调用指南

    最近无意发现腾讯AI开放平台上提供了大量好玩的人工智能云服务,而且是完全免费的.只需要用QQ号登录即可.这么好的东西,作为一个程序员,当然要试试了! 从上图可以看出腾讯AI开放平台提供的人工智能服务主 ...