首页 > 代码库 > background属性总结,background-image路径问题
background属性总结,background-image路径问题
(1)background属性总结
background 简写属性在一个声明中设置所有的背景属性。
可以设置如下属性:
background-color规定要使用的背景颜色。
background-position规定背景图像的位置。
background-size规定背景图片的尺寸。
background-repeat规定如何重复背景图像。
background-origin规定背景图片的定位区域。
background-origin: padding-box|border-box|content-box;边框盒、内边距框、内容框。
background-clip规定背景的绘制区域。
background-clip: border-box|padding-box|content-box;边框盒、内边距框、内容框。
background-attachment规定背景图像是否固定或者随着页面的其余部分滚动。
background-image规定要使用的背景图像。
如果不设置其中的某个值,也不会出问题建议使用复合属性,background
: #00FF00 url(bgimage.gif) no-repeat fixed top;在一个声明中设置所有的背景属性。而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。
(2)background-image属性图片的相对路径图片路径问题
图片路径可以是绝对路径、根相对路径和文档相对路径
绝对路径是包括服务器协议的完全路径,比如“百度主页”,完全路径为:http://www.baidu.com/index.htm,如果所要链接当前站点之外的文档,就必须使用绝对路径。
相对路径包括根相对路径(Site Root)和文档相对路径(Document)两种。
根相对路径(也称相对跟目录)的路径以“/”开头,路径是从当前站点的根目录开始计算。
文档相对路径就是指包含当前文档的文件夹,也就是以当前网页所在文件夹为基础开始计算路径。
background-image属性主要用来设置或检索对象的背景图像,其值有none和url,none表示无背景图像,url为背景图像的地址,url可以用相对地值或绝对地址
.bg {background-image: url(images/new_8.gif);}
.bg {background-image: url(http://www.mzwu.com/images/new_8.gif);}
当使用相对地址时,相对地址和css是内联还是外联是有关系的
注意:在css中url相对地址应是背景图像相对于css所在文件的地址!当使用内联css时,相对地址为图像相对于htm文件的地址;当使用外联css时,相对地址应为图像相对于css文件的地址!
index.html
images/n.png
style/css.css
当使用内联方式时,用background-image设置index.htm中的对象的背景图像代码为:
<style type="text/css">
.bg {background-image: url(images/n.png);}
</style>
.bg {background-image: url(images/n.png);}移到css.css文件中,改用外联的方式调用:
<link href="http://www.mamicode.com/style/css.css" rel="stylesheet" type="text/css" />背景图像显示不出来
必须改为.bg {background-image: url(../images/n.png);}
css.css内容.bg {background-image: url(images/n.png);}并移到images文件夹下,修改外联css地址再做测试:
.bg {background-image: url(n.png);}
在js中
background属性总结,background-image路径问题
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。