它的组合写法:

background-color, background-image, background-repeat,backgroundattachment, background-position。

  示例写法:body {background:#000 url(../images/图片路径) no-repeat fixed 5px 10px;}

background:5个子属性
    第一个是颜色,没得说。
    第二个是图片,后面的子属性都是对此子属性的约束
    第三个是repaeat 重复
    第四个是attachment  固定
    第五个是position 位置

没有图片的情况就不说了,看一下有图片的情况。
子属性repeat.

        div#bg
{
width:400px;
height:400px;
border:RED solid 2px;
/*背景*/
background: URL("small.jpg") ;
}

看看效果图:

在上面的CSS代码中根本没有对重复进行设置,结果有了水平方向和竖直方向的重复现象 ,说明子属性background-repeat的默认值是repeat-both.下面是设置repeat-x的效果和repeat-y的效果:

子属性position.

  使用方法是设置左边距离和顶部距离,都是相对于元素的边框的。下面是设置background: URL("small.jpg") no-repeat  23px 23px;的效果:

看到背景图片的位置不在最左上角了,默认是在最左上角的。

子属性attachment。

  这个很有效果感,做出的效果很是个性。一个例子是ebey。background: URL("small.jpg")   fixed ;

  

  好像是这么个情况:设置div的background的fixed子属性后,div变成了一个罩子,它到哪里,背景就显示到哪里,背景在整个窗口区域都存在的样子。设想有另一个DIV也有一个背景图片,也设置fixed的话,那么也会有此效果,这或许就是ebey页面中的效果吧。

attachment对position的影响:

  设置属性:background: URL("small.jpg")  no-repeat fixed 34px 34px ;结果是背景图片看不到了。当把fixed修改为scroll时,图片又出现了。这是为什么呢?

原来,fixed是指背景图片的位置相对于浏览器客户区。scroll是指图片的位置相对于div的内边框。所以一般设置fixed时一般不要设置no-repeat。

JS

  object.style.backgroundColor

CSS--background的更多相关文章

  1. CSS 背景-CSS background

    这里有个很好的样式学习网站:http://www.divcss5.com/rumen/r125.shtml 一.Css background背景语法   -   TOP CSS背景基础知识 CSS 背 ...

  2. CSS background 属性 总结

    CSS background 属性总结

  3. HTML CSS——background的认识(一)

    今天回归bug时无意间看到了样式表中background属性,如今总结一下: 1.background-color:设置元素的背景色.其值能够为:color-name.color-rgb.color- ...

  4. css background之设置图片为背景技巧

    css background之设置图片为背景技巧-css 背景 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色. ...

  5. CSS background 之设置图片为背景技巧

    首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用):background-color 背景颜色background-image 背景图片backg ...

  6. CSS background 属性详解

    CSS background Property 语法: background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-cl ...

  7. [CSS3] CSS Background Images

    Body with background image and gradient html { background: linear-gradient(#000, white) no-repeat; h ...

  8. css background之设置图片为背景技巧

    原文 Background是什么意思,翻译过来有背景意思.同样在css里面作为css属性一成员同样是有背景意思,并且是设置背景图片.背景颜色.背景图片截取等样式. 首先先来看看background有那 ...

  9. css background transparent All In One

    css background transparent All In One opacity ul { max-height: 100px; /* max-height: 187px; */ overf ...

  10. css & background & svg

    css & background & svg https://developer.mozilla.org/en-US/docs/Web/CSS/background backgroun ...

随机推荐

  1. 华为Java编程军规,每季度代码验收标准

    引言: 这个标准是衡量代码本身的缺陷,也是衡量一个研发人员本身的价值. 军规一:[避免在程序中使用魔鬼数字,必须用有意义的常量来标识.] 军规二:[明确方法的功能,一个方法仅完成一个功能.] 军规三: ...

  2. 初步进行vs单元测试

    首先提一下vs的安装过程,在官网下载免费社区版到本地,根据提示选择安装路径.以及大部分包文件开始安装,等待即可. eclipse的安装比vs多了JDK的下载安装,配置正确的path,以及在eclips ...

  3. SqlServer表结构查询

    一.前言 近两天项目升级数据迁移,将老版本(sqlserver)的数据迁移到新版本(mysql)数据库,需要整理一个Excel表格出来,映射两个库之间的表格字段,示例如下: Mysql数据库查询表结构 ...

  4. 初学JavaScript

    什么是 JavaScript? JavaScript 被设计用来向 HTML 页面添加交互行为. JavaScript 是一种脚本语言(脚本语言是一种轻量级的编程语言). JavaScript 由数行 ...

  5. 关于sql中in 和 exists 的效率问题,in真的效率低吗

    原文: http://www.cnblogs.com/AdamLee/p/5054674.html 在网上看到很多关于sql中使用in效率低的问题,于是自己做了测试来验证是否是众人说的那样. 群众: ...

  6. Mac下QT错误,Xcode配置解决办法

    出现错误: Xcode not set up properly. You may need to confirm the license agreement by running / 解决办法如下: ...

  7. 基于H5的微信支付开发详解

    这次总结一下用户在微信内打开网页时,可以调用微信支付完成下单功能的模块开发,也就是在微信内的H5页面通过jsApi接口实现支付功能.当然了,微信官网上的微信支付开发文档也讲解的很详细,并且有实现代码可 ...

  8. chrome中不可见字符引发的float问题

    起因是刷知乎时碰到这么个问题:https://www.zhihu.com/question/41400503 问题代码如下: <!DOCTYPE html> <html lang=& ...

  9. [游戏开发-学习笔记]菜鸟慢慢飞(九)- NGUI- UIPanel(官方说明翻译)

    我自己笔记是做在OneNote上,直接复制粘贴过来变成图片了,效果好像还可以. 机器翻译,我自己看了一下,改了一部分.

  10. 通过配置Mysql参数提高写入速度

    1) innodb_buffer_pool_size 如果用Innodb,那么这是一个重要变量.相对于MyISAM来说,Innodb对于buffer size更敏感.MySIAM可能对于大数据量使用默 ...