css中背景图片路径问题
1、不要给背景图片路径加引号
将background:url("xxx.gif")改为background:url(xxx.gif)
因为对于部分浏览器加引号反而会引起错误。
2、背景图片的路径是相对与当前css页面的路径。
例如:
有如下目录结构
|--images
|--xxx.gif
|--css
|--xx.css
|--index.html
代码内容
index.html引用xx.css文件。<link rel="stylesheet" href="css/xx.css" />
xx.css要引用xxx.gif图片其写法为:background:url(../images/xxx.gif)
3、我们通常用link的方法直接引用一个CSS文件到HTML(或其它活动文档)文件中。我们会发现有时候我们的图片无法显示了。此时,请查看你的CSS代码,是不是重复设置有问题,是不是图片的定位有问题。如果这些都没有问题请去掉background的重复与定位属性,还原成默认性。如果图片还是没有出现,那只能是我们今天所说的路径问题了!在一般情况下,我们习惯于这样设置图片路径:
Example Source Code:
background-image:url(logo.jpg);
background-image:url(../logo.jpg);
background-image:url(../images/logo.jpg);
对于第一种情况“url(logo.jpg)”。我们要看此图片是不是与CSS文件在同一目录。对于第二与第三种情况,我们是极力不推荐使用的,因为我们的网页文件可能存在于多级目录中,不同级目录的文件位置注定了我们的相对路径是不一样的。而这样就让问题复杂化了,很可能图片在这个文件中显示正常,换了一级目标,图片就找不到影子了。
有一种方法可以轻松解决这一问题,我们可能建立一个公共文件目录,用来存放一些公用的图片文件,JS脚本,CSS文件,例如“common”,我们将CSS文件直接置于该目录中,也可以将图片文件也直接存于该目录中,如果图片文件较多在其内部建立一个目录存放图片文件“common/images”。我们在CSS文件中直接写:url(logo.jpg)或url(images/logo.jpg)就可以搞定上面的问题了。
关于网站文件的归类与存放,除了根据个人习惯,还要考虑科学性。如果是大型的项目,你应该遵循团队的约定,不然这些问题是够头疼的!
css中背景图片路径问题相关推荐
- webpack如何设置html中img路径和css中背景图片路径区别开
在使用webpack过程中,打包后发现html中img路径是: <img src="img/01.jpg" alt="标题图片" /> 但是在mai ...
- vue样式中背景图片路径_vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了 如一个简单css语句 .all_bg { background: url(../imag ...
- php背景图片 存放位置,CSS中背景图片位置 background-position 的使用方法
在使用背景图片时,经常会遇到背景图片所在的位置不是我们想要的,那如何设置背景图片的位置呢?以下就来介绍CSS中背景图片位置 background-position 的用法. 在背景图片的背景图片位置属 ...
- html里如何定位背景图片,Html+Css CSS中背景图片定位方法
CSS中背景图片的定位,困扰我很久了.今天总算搞懂了,一定要记下来. 在CSS中,背景图片的定位方法有3种: 1)关键字:background-position: top left; 2)像素:bac ...
- vue样式中背景图片路径_解决vue打包css文件中背景图片的路径问题
vue-cli写完的静态页面我们在node环境中引入没有问题,但是打包后放在Apache环境下,路径却有问题了 如一个简单css语句 .welcome { width: 420px; height: ...
- vue样式中背景图片路径_vue-cli3.0全局less样式中该如何正确设置背景图片的路径?...
用vue-cli3脚手架新建的项目,在使用less设置背景图片的时候遇到了路径报错问题,该如何正确设置背景图片的路径? 项目目录如下: 现在在css文件中有一个全局样式common.less.使用的是 ...
- 网站图片定位代码html5,CSS中背景图片的定位
在CSS中,背景图片的定位方位有3种: (1)关键字:background-position: top right; (2)像素:background-position: 0px 0px; (3)百分 ...
- css中背景图片图片不能自适应解决方法
Background-size的属性值 background-size: auto(原始图片大小) || number(数值) || percentage(百分比) || cover(放大铺满) || ...
- css怎么分开背景图片,css切背景图片(background-position)
给元素添加背景图片的方式有很多,个人总结的有: 用img插入图片: css3的方式手动绘图: 单独用background-image单独插入图片: 其中用background-image有两种方法,一 ...
最新文章
- l开头的英文车标是什么车_汽车品牌车标大全,有哪些品牌的车标你没见过?...
- Python中字典对象实现原理
- 8 无法识别raid盘_王者荣耀防沉迷规则再升级;未来将采用人脸识别验证
- python多个函数_什么是在Python中使用多个构造函数的干净的、pythonic的方法?
- 软件测试qa等级考核制度,QA质量规范
- android:在ViewPager中使用Button
- Java常用类:String
- Sqoop导入文件格式Text、Parquet、Avro、Sequence速度和大小的对比
- android 直播 h5,H5移动端直播的要点
- java格式化日期24小时_Java如何格式化24小时格式的时间?
- Windows注册表内容详解
- PS之人物高低频磨皮
- cif t t操作流程图_外贸跟单员的详细工作流程:跟单员工作流程图
- 如何编写简洁的代码?
- 平均获客成本_获客成本5年翻了6倍,布局私域流量的背后隐藏了哪些惊人数据?...
- frangi黑森矩阵_消灭黑森臭虫
- csv文件用excel打开不分列
- 关于数字证书,数字签名,CA证书,Https都在这里了
- anemometer mysql_十分钟部署Anemometer作为Mysql慢查询可视化系统
- 大三下的计划以及找工作的准备
热门文章
- FFB6D A Full Flow Bidirectional Fusion Network for 6D Pose EstimationFFB6D 6D 姿势估计的全流双向融合网络
- 字符串转换成对象的操作
- 如何使用路由器实现无网局域网,并实现PC与开发板间的通信
- 使用指针实现strcpy函数的功能
- 2016年中国安防系统集成商发展状况如何?
- Python全栈编程
- 10分钟认识低代码平台
- tile cannot extend outside image
- 微信小程序开发工具npm用不了,报错“npm不是内部或外部命令,也不是可运行的程序”
- 高效经理的五个常用原则