`

CSS背景图片路径设置

 
阅读更多
/**
在CSS文件里,有时要用到background,即加一个背景图片,一般在做按钮样式时会经常用到。
css中加背景图片根据图片及css文件的相对位置分一下几种类型:
1.同包下:background : url(aaa.gif);
2.不同包:
    在这种情况下有2中方法可以设置,一种是使用绝对路径,即http://www.iteye.com/aaa.gif这种,不过一般不推荐这么用,不利于项目移植;一种是使用相对路径,首先需要找到图片文件和css文件共同的一个根目录,然后再加上图片的子目录,比如:
    css文件位置:WebRoot/test/css/a.css
    图片文件位置:WebRoot/platform/resource/images/icons/a.gif
想要找到共同的根目录就需要用到 "../" 这个路径的意思是上一级目录,如果是两层上级目录,就是 "../../" 那么,按照这种写法的话,a.css中得背景图片css应该这么写:
    background:url(../../platform/resource/images/icons/a.gif)
为什么呢?
  首先,我们观察这两个文件的位置,可以发现,共同的根目录是WebRoot,
我们首先在a.css的位置找到WebRoot,所以有了"../../" 然后拼接图片的子目录的路径 又有了"platform/resource/images/icons/a.gif" 合在一起后就是上面的结果了。
**/
 
分享到:
评论

相关推荐

    完美解决webpack打包css背景图片路径问题

    在vue组件的style标签内部有如下一段使用背景图片的css代码 background-image: url("../assets/img/icon_add.png"); 在webpack中css-loader的解析配置如下 { test: /\.(css|less)$/, exclude: path.resolve(__...

    css全屏背景图片设置,django加载图片路径详解

    css全屏背景图片设置,django加载图片路径详解 XML/HTML Code复制内容到剪贴板 <head>  <style type="text/css">  #bg { position:fixed;  top:0;  left:0;  width:100%;  height:100%;...

    解决vue打包css文件中背景图片的路径问题

    今天小编就为大家分享一篇解决vue打包css文件中背景图片的路径问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

    纯css3实现鼠标悬停背景翻转动画导航

    今天的这款效果,鼠标悬停背景图片翻转,无需js,只要一部分的css3代码即可,其他的都是普通的css2代码 使用方法: 1、将head中的lanrenzhijia.css样式引入到你的网页中 2、将body中的代码部分拷贝到你需要的...

    css里面图片路径问题(同包/不同包)探讨

    css中加背景图片根据图片及css文件的相对位置分一下几种类型1.同包下2.不同包,接下来针对这两种情况做一下介绍,感兴趣的朋友可以参考下哈,希望可以帮助到你

    css3鼠标悬停背景做360°旋转效果

    纯css实现的一个鼠标悬停背景图片做动画旋转效果 摒弃掉烦人的js,只用css3就可以实现的效果,有效的减小了客户端的内存,提高运行效率 使用方法超级简单: 1、将css复制到网页中 2、直接调用指定的...

    PostCSS插件生成能够根据不同视口宽度缩放的背景图像

    PostCSS插件生成能够根据不同视口宽度缩放的背景图像

    Web前端与移动开发之复合选择器 css元素显示模式 背景属性.txt

    页面元素既可以添加背景颜色 也可以添加背景图片 只不过背景图片在背景颜色上方 即背景图片会压住背景颜色 (4)背景图片的位置 background-position: x y; ①参数是方位名词 top | center | bottom | left | ...

    详谈vue+webpack解决css引用图片打包后找不到资源文件的问题

    使用vue打包,通过css引用图片资源。...查了一下原因,css引入图片再打包后,style-loader无法设置自己的publicPath,于是我改变了ExtractTextPlugin的css路径publicPath。 if (options.extract) { retur

    css3伪放大镜(图片放大动画)效果

    效果描述: 五张小图片呈圆形平均排列起来,当鼠标悬停后,大的背景显示当前图片 且小图片高亮显示,背景呈现灰白色,主次分明 ... 纯css3实现的图片动画效果,非常漂亮 ... (注意图片路径保持正确即可)

    vue 项目打包时样式及背景图片路径找不到的解决方式

    问题描述:vue项目打包后,文件找得到,但是引用的字体及背景图片找不到; 解决方法: 主要是需要单独为 css 配置 publicPath 。 ExtractTextWebpackPlugin 提供了一个 options.publicPath 的 api,可以为css单独...

    Vue项目中设置背景图片方法

    在Vue项目开发中我们经常要向页面中添加背景图片,可是当我们在样式中添加了背景图片后,编译打包后,配置到服务器上时,由于路径解析的问题,图片并不能够正确的显示出来,如下CSS样式: background:url(../../...

    css揭秘,高清文字原版,带书签

    38 根据兄弟元素的数量来设置样式 178 39 满幅的背景,定宽的内容 182 40 垂直居中 185 41 紧贴底部的页脚 191 第 8 章 过渡与动画 195 42 缓动效果 196 43 逐帧动画 205 44 闪烁效果 209 45 打字动画 212 ...

    IE6下CSS图片缓存问题解决方法

    用一句代码即可搞定: 代码如下: document.execCommand(“BackgroundImageCache”, false, true); 当然为了其它浏览器上能正常通过,需要做下判断后调用,才更安全: 代码如下: if(Browser.isIE6){ try{ document....

    Java Web应用开发:关于路径.docx

    客户端路径是由客户端浏览器发起请求的路径,例如图片路径、超链接路径、表单提交地址、背景图路径、链接js文件的路径,链接CSS文件的路径。简单点理解就是html文件里可以使用的各种路径。重定向路径也是客户端路径...

    html5+css3 弹出遮罩层

    默认是绿色背景,你完全可以换成其它颜色,这个不用我细说了吧。 请在现代浏览器中查看这些demo。 11个效果名称分别是: Huge Inc, Corner, Slide down, Scale, Door, Content Push,Content Scale, Corner ...

    CSS 样式表中引用图片地址在各浏览器中的差异

    通常,我们的页面都是引用了很多样式文件,同时样式文件给我们的页面设置了很多背景图片。但是这里有个小细节容易忽视。图片的referer来源处理存在浏览器的差异。 通常,我们的样式和图片的结构如下 user.qzone.qq....

    postcss-auto-imgmq:自动插入媒体查询图像

    根据图片名或图片路径自动添加媒体查询到样式表 常见场景 retina屏高清图片自动适配 根据屏幕尺寸替换背景图片 其他媒体查询条件相关图片样式自动生成 如何使用 1.从npm安装 npm install -D postcss-auto-imgmq 2....

Global site tag (gtag.js) - Google Analytics