zoukankan      html  css  js  c++  java
  • background属性总结,background-image路径问题相对于css和js

    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/abc.gif);}
    .bg {background-image: url(http://www.mzwu.com/images/
    abc.gif);}
    当使用相对地址时,相对地址和css是内联还是外联是有关系的,
    注意:
    相对路径的时候,在css和js中引用图片的相对路径的基准是不一样的。在css中出现的相对路径,是以css文件所在路径为基准的,而js中的路径则是以导入此js的网页文件所在的位置为基准的。

    所以在css中当使用内联css时,相对地址为图像相对于htm文件的地址;当使用外联css时,相对地址应为图像相对于css文件的地址!

    eg:

    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="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);}

     再举个例子:eg:

    /index.html

    /js/app.js

    /css/style.css

    /images/bk1.jpg、bk2.jpg
    style.css代码
    #content{background:url(../images/bk1.jpg) no-repeat;200px;height:200px;margin:auto;}
    url(../images/bk.jpg)路径是相对于style.css的
    app.js代码
    document.getElementById('content').style.backgroundImage='url(images/bk2.jpg)';
    url(images/bk2.jpg)路径是相对于index.html的,而不是app.js的url(../images/bk.jpg)。

     
     
     
  • 相关阅读:
    Java反射机制的简单应用
    UI组件之AdapterView及其子类关系,Adapter接口及事实上现类关系
    CSDN日报20170406 ——《代码非常烂,所以离职。》
    Swift环境下实现UILabel居上 居中 居下对齐
    在EA中将画出的ER图转换成SQL脚本
    hdu2236
    glm编译错误问题解决 formal parameter with __declspec(align(&#39;16&#39;)) won&#39;t be aligned
    CSS中的相关概念
    javascript jquery 推断对象为空的方式
    swift 给导航添加item,实现界面的跳转
  • 原文地址:https://www.cnblogs.com/kelly2017/p/7091829.html
Copyright © 2011-2022 走看看