1、background-color背景颜色属性

  ①颜色表示方法

    英语单词:red   blue   purple    skyblue。

    rgb:r代表红色   g代表绿色   b代表蓝色    也就是颜色的三原色。

    十六进制:#0xff ff ff

2、background-image属性

  background-image:url(images/i.jpg);背景天生是会被平铺满的。

3、background-repeat属性

  background-repeat:no-repeat;控制background-image里的图片不是平铺满,而是只出现一次。

  background-repeat:repeat-x;控制background-image里的图片不是平铺满,而是横向重复。

  background-repeat:repeat-y;控制background-image里的图片不是平铺满,而是纵向重复。

4、要妙用repeat这个属性    用小图做大背景

5、background-position背景定位属性(重点)

                 X            Y

  ①background-position:向右移动量 向下移动量;               移动量可以是负数  例如:

  ②css精灵:又叫css雪碧技术,是一种css图像合并技术。该方法是将小图标和背景图像合并到一张图片上,然后利用css的背景定位来显示需要显示的图片部分。

  Css精灵有什么优点,就是减少了http请求。比如4张小图片,原本需要4个http请求。但是用了css精灵,小图片变为了一张图,http请求只有1个了。

  ③用单词表示:background-position:描述左右的单词    描述上下的单词。比如:background-position:center top;左右居中  上下居顶。

用途:大背景图的溢出处理。

  这个属性经常用于图片比浏览器大得多的时候,但是我们还想让图片居中的时候,这个时候就需要background-position去定位一下,利用center属性就能搞定。例如暗黑破坏神 台湾的官网背景图。

  这个属性还有用于通栏banner图。其实这个banner图是一个超长的图。

6、background-attachment属性

  这个属性设置为fixed,作用就是用于背景图(没有设置no-repeat的背景图)不随着滚动条滚动,但是表层的文字可以随着滚动条的滚动而滚动。

7、background综合属性

  background:red url(1.jpg) no-repeat 100px 100px fixed;

  等价于:

  background-image:url(1.jpg);

  background-repeat:no-repeat;

  background-position:100px 100px;

  background-attachment:fixed;

background系列属性的更多相关文章

  1. JavaScript学习笔记5 之 计时器 & scroll、offset、client系列属性 & 图片无缝滚动

    一.计时器 setInterval ( 函数/名称 , 毫秒数 )表示每经过一定的毫秒后,执行一次相应的函数(重复) setTimeout ( 函数/名称 , 毫秒数 ) 表示经过一定的毫秒后,只执行 ...

  2. css中background背景属性概

    css中background背景属性概 background:url(背景图片路径)  no-repeat;/*不重复默认在左上方*/background:url(背景图片路径)  no-repeat ...

  3. background复合属性详解(上):background-image

    background复合属性是个很复杂的属性,花样非常多,比较神奇的是css3 中支持多图片背景了,这篇文章先讲讲background-image属性,其他背景属性会在后续的文章综合总结. 一.最基本 ...

  4. 前端CSS-font属性,超链接的美化,css精灵,background综合属性

    前端CSS-font属性,超链接的美化,css精灵,background综合属性 1. font属性 使用font属性,能够将字号.行高.字体,能够一起设置. font:14px/24px " ...

  5. CSS探案之 background背景属性剖析

    首先,我们先来看看两个css属性:background和background-color,对!就是这两位,相信大家在平时应该没少 麻烦人家把,反正我是这样,几乎也少会用到背景图,原因很简单:就是有点害 ...

  6. 系列属性(offset、scroll、client)

    一.offset系列属性 <div id="dv"></div> <!-- 已在style标签里设置div宽高各100px --> <sc ...

  7. js offset系列属性

    offsetParent:返回该元素有定位的父级,如果父级都没有定位则返回body offsetTop:返回元素相对父级(带有定位的父级)上方的偏移 offsetLeft:返回元素相对父级(带有定位的 ...

  8. background的属性和背景图片定位的实例

    本文内容: 1.背景图片定位示例 2.background常用的属性值 3.background-repeat新增的round.space属性 4.background-size的属性值(着重介绍co ...

  9. background相关属性

    background-origin: 规定 background-position 属性相对于容器的哪一部分来定位. padding-box 背景图像相对于内边距框来定位:(默认) border-bo ...

随机推荐

  1. 杂音 & pop 音的解决方法

    杂音 & pop 音的解决方法 1. 喇叭有严重的"吱吱"破音,绝大多数的原因有可能在于V(out)电压不稳定,所以最好测一下无负载时的输出电压.同时也可以测量 VCC – ...

  2. Qt中利用QTime类来控制时间,这里简单介绍一下QTime的成员函数的用法:

    Qt中利用QTime类来控制时间,这里简单介绍一下QTime的成员函数的用法: ------------------------------------------------------------ ...

  3. hash随笔

    hash属性是一个可读可写的字符串,是url的锚部分(从#开始).多用于单页面应用中,使其包含多个页面. 定位:通过id来定位 eg: <div id= "part1"> ...

  4. 转 dos 下的 find 和 重定向

    1.find /i "ora-" *.* > check.log 附录: 我对findstr是如此的依赖,以至于当我向各位讲解find命令的时候,我还得老老实实地在cmd窗口 ...

  5. HDU5908 Abelian Period 暴力

    题目大意:将一个数组分成长度为k的几个连续区间,如果每个区间内各个元素出现的次数相同,则称k为一个阿贝尔周期,从小到大打印所有阿贝尔周期,数据间加空格. 题目思路:map+暴力 #include< ...

  6. UVA 1193 区间相关(greedy)

    input n d 1<=n<=1000 n行坐标xi,yi output 位于x轴扫描器的扫描距离为d,至少要多少个扫描器才能扫描到所有坐标 如果无法扫描完输出-1,否则输出扫描器个数 ...

  7. Java Networking Related (Java Examples in a Nutshell 3rd Edition)

    Examples to: Use URL class to parse URLs and download the network resources specified by a URL Use U ...

  8. linux内核移植到S5pv210

    make s5pv210_defconfig 1.System Type  ---> (0) S3C UART to use for low-level messages 2.Kernel ha ...

  9. img图片inline-block总结

    <div style="font-size:0;"> <img data-src="http://image.zhangxinxu.com/image/ ...

  10. android5.0----SVG

    SVG ----scalable vector Graphics 可缩放矢量图形 android L 即android 5.0的新特性. 1,SVG是干什么的? 可缩放矢量图形是基于可扩展标记语言(标 ...