清楚相对路径和绝对路

/ 表示的是根目录
./表示的是当前目录
. . /表示的是上一级目录同理. . /. . /表示的是上上级目录
那什么是相对路径和绝对路径呢？
相对路径：当图片存在工程文件文件夹images，此时的地址就是相对路径
绝对路径：图片在电脑上的存储位置就是绝对路径
我们如何解决呢
如果是使用 background：url（./images/pic.png）;那么就会导致图片引入失败
因为我们一般开发引用的是外部样式表，使用该路径在当前目录下找不到images文件夹，那么也就找不到我们所想要引用的图片
如果使用 background：url(. ./images/pic/png); 就会先转到工程文件目录下，那么就能找到images文件夹，也就能找到我们想要的图片
有人可能会说根目录不行吗，我尝试过是不行的，这还是和css外部样式有关，做一个设想：我们在head里面直接写style可以吗，这样是可行的，但是这样代码的可读性和可维护性不高，所以我还是推荐使用相对路径. ./来引入

使用background 的url 引入背景图片失效的问题相关推荐

Vue单文件中引入背景图片时，四周有空白的问题
Vue单文件中引入背景图片时,四周有空白的问题问题背景初始引入背景图更新后的背景图设置问题背景近期公司有个管理系统前后端分离,但是前端人员不够,只能我们后端来凑,而在前端的开发过程中总是遇到 ...
angular 行内引入背景图片
angular 引用背景图片 angular 引用背景图片本小白在引入背景图片的一直出现报错,一开始以为自己的路径没有引入正确,报错如下图解决方法双引号的问题把双引号换成单引号即可(行内才会出现 ...
使用base64:url 来定义背景图片url
普通的背景图片css是这样的: background-image:url(http://www.zhangxinxu.com/wordpress/wp-content/themes/default/i ...
微信小程序通过background或者background-image设置背景图片
微信小程序设置北京图片目前只支持两种 1.在线图片 2.base64图片所以其一你如果有自己的服务器可以将图片放到自己的web服务器上: 其二将背景图片进行base64转换后来使用,在线转网站htt ...
IDEA插件系列（8）：Background Image Plus设置背景图片
0. 目录 1. 插件介绍 2. 安装方式 3. 使用方法 3.1 设置背景图片 3.2 清除背景图片设置 3.3 设置随机图片 1. 插件介绍将编辑器背景设置为文件夹中的随机图片. 2. 安装方式 ...
全局scss封装引入背景图片路径报错
最近使用scss做了全局的mixin封装,用到背景图,意外发现通过相对路径引入图片后报错,大致意思为图片路径不对,改为了使用@代替src路径引入图片依然报错,一番百度后带出解决方案通过 ~@ 代替sr ...
HTML中设置图片或者文档路径,html怎么用background相对路径设置背景图片
相对路径就是指由这个文件所在的路径引起的跟其它文件(或文件夹)的路径关系. 1 两个文件在同一个文件夹下,直接写文件名即可假设info.html路径是:c:\Inetpub\wwwroot\site ...
React开发（172）:React引入背景图片
import React, { Component } from 'react'; import img1 from '@/assets/1.jpg';
html背景图片横屏,CSS背景颜色背景图片居中重复固定样式background经验篇
我们使用CSS Background样式属性,可以设置网页背景单一颜色.网页背景为图片.网页背景图片居中于网页.网页背景图片网页固定位置.网页背景图片中网页中重复平铺等css背景样式介绍与案例讲解. ...

使用background 的url 引入背景图片失效的问题

使用background 的url 引入背景图片失效的问题

清楚相对路径和绝对路

使用background 的url 引入背景图片失效的问题相关推荐

最新文章

热门文章