background属性是所有背景属性的缩写：

　　以下是这些背景属性：

　　background-color：背景颜色

　　　　你可以通过颜色名称（red/green/blue)来设置

　　　　也可以用十六进制（#fff/#000/#bcbcbc)

　　　　还可以用到rgb(x,x,x)  x取值（0~255）

　　background-position:背景开始位置

　　　　也是三种取值方式，第一种是用方位词（top/right/bottom/left)组合，如left top

　　　　百分比x%  x%,如0% 0%表示左上角

　　　　用像素表示，如100px 100px

　　background-size:背景大小

　　　　你可以通过设置给定长度来调节背景大小，如background-size：100px 80px;

　　　　也可用百分比来设置，注意这里的百分比说的是背景定位区域，而不是图像的原本大小。如background-size:50% 50%;

　　background-repeat:背景重复设置

　　　　no-repeat:不重复

　　　　repeat-x: x（水平）方向上重复

　　　　repeat-y: y（垂直）方向上重复

　　　　repeat:重复

　　background-origin:指定background-position属性的相对位置

　　　　padding-box:背景填充框的相对位置

　　　　border-box:背景边框的相对位置

　　　　content-box:背景相对内容框的位置

<!doctype html>

<html>

<head>

<style>

div

{

    width:100px;

    height:100px;

    border:1px solid black;

    padding:20px;

    margin:20px;

    background-image:url("weixin.png");

    background-repeat:no-repeat;

    background-position:top;

    float:left;

}

#id1

{

    background-origin:padding-box;

}

#id2

{

    background-origin:content-box;

}

#id3

{

    background-origin:border-box;

}

</style>

</head>

<body>

<div id="id1">

background-origin:指定background-position属性的相对位置

</div>

<div id="id2">

background-origin:指定background-position属性的相对位置

</div>

<div id="id3">

background-origin:指定background-position属性的相对位置

</div>

</body>

</html>

效果：

　　background-clip:背景的绘制区域

　　　　一样有padding-box/border-box/content-box三个值

<!doctype html>

<html>

<head>

<style>

div

{

    width:100px;

    height:100px;

    border:1px dotted grey;

    padding:20px;

    margin:20px;

    float:left;

    background-color:red;

    border-width:10px;

}

#id1

{

    background-clip:padding-box;

}

#id2

{

    background-clip:content-box;

}

#id3

{

    background-clip:border-box;

}

</style>

</head>

<body>

<div id="id1">

红色是背景

</div>

<div id="id2">

红色是背景

</div>

<div id="id3">

红色是背景

</div>

</body>

</html>

效果：

　　background-attachment:背景是否固定或者随着页面滚动

　　　　fixed：固定

　　　　scroll:滚动（默认）

　　background-image:背景图像

　　　　url：图像路径

CSS背景属性background的更多相关文章

  1. CSS背景属性Background详解

    [转] 本文详解了CSS的背景属性Background,包括CSS3中新增的背景属性.如果你是个CSS初学者,还可以查看之前介绍的CSS浮动属性和CSS透明属性详解. CSS2 中有5个主要的背景(b ...

  2. CSS下背景属性background的使用方法

    背景颜色(background-color) CSS可以用纯色来作为背景,也可以将背景设置为透明,background相当于xhtml中的bgcolor. 它的两个值: transparent(默认值 ...

  3. CSS代码示例-背景属性(background)

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  4. CSS背景属性

    CSS背景属性 1.background-attachment 属性 scroll:默认值.背景图像会随着页面其余部分的滚动而移动. fixed:当页面的其余部分滚动时,背景图像不会移动. inher ...

  5. 0016 CSS 背景：background

    目标 理解 背景的作用 css背景图片和插入图片的区别 应用 通过css背景属性,给页面元素添加背景样式 能设置不同的背景图片位置 [插入图片,不用设置img元素的父元素.自身元素大小,即可见,但是背 ...

  6. 你不知道的CSS背景—css背景属性全解

    CSS背景在网页设计中使用频率非常高,然而对于这个开发人员很熟悉的CSS属性,却隐藏着许多不为初级开发人员熟知的细节,这篇文章尝试扒开这层不为人知的面纱. 首先列举一下CSS中关于元素背景的所有属性并 ...

  7. CSS 背景属性

    background: 简写属性,作用是将背景属性置在一个声明中 background-attachment: 背景图像是否固定或者随着页面的其余部队滚动 background-color: 设置元素 ...

  8. CSS 背景图像 background属性简写

    background属性简写 background属性可以像margin padding属性一样,有简写方法,它的简写顺序是: background-color background-image ba ...

  9. css背景样式background

    background用来定义html元素的背景效果 background-color:定义元素的背景颜色,背景的颜色值通常有三种定义方法 1.十六进制方式,如"#ff0000" 2 ...

随机推荐

  1. 用树莓派做3G无线路由器

    第一篇博客献给我做了很长时间的课程设计,也就是题目所说的3G无线路由器.本次开发所使用的开发平台为树莓派开发板,下面进入正题..... 目标:将树莓派设置成为一个3G无线路由器,通过华为的E261拨号 ...

  2. poj 1932 XYZZY (最短路径)

    XYZZY Time Limit: 1000MS   Memory Limit: 30000K Total Submissions: 3105   Accepted: 887 Description ...

  3. [SQL Server]关于标识列,标识从1开始计数的的方法

    DBCC CHECKIDENT ('表名',  RESEED, 0) //从30开始 DBCC  CHECKIDENT  (jobs,  RESEED,  30)

  4. Password [分块]

    题面 $n,m,x \leq 10^5$ 思路 首先$n=2$做法很多,不讲了 $n=3$的时候,分块维护两个东西:每一个数出现次数的前缀和,和出现次数的出现次数的前缀和(说的有点绕,但是应该挺好理解 ...

  5. 股神小L [贪心]

    题面 思路 股票题肯定是贪心或者$dp$啊 这个题比较$naive$,可以看出来你这里买股票的过程一定是能不买就不买,能卖就拣最贵的日子卖,而且时间不能倒流(废话= =||) 所以我们按照时间从前往后 ...

  6. FIRST SCRAPY PRJ

    zpc@Lenovo-PC:/prj/pyscrapy/a$ scrapy startproject helloword New Scrapy project 'helloword' created ...

  7. python2 登录带验证码的页面

    #!/usr/bin/python#-*- coding: utf-8 -*- import os,json;import urllib,urllib2;import cookielib; #获取co ...

  8. linux用户登录

    一.linux用户登录过程访问的文件 /etc/passwd---用户登录时,linux会先到这里查看用户Id.组Id.登录后的shell.用户工作目录 /etc/shadow(影)---linux在 ...

  9. jQuery简单操作HTML的DOM

    #转载请留言联系 如果需要了解什么是HTML的dom,可以参考:http://www.w3school.com.cn/htmldom/index.asp 下面的是jQuery操作DOM,并不是Java ...

  10. 【linux高级程序设计】（第九章）进程间通信-管道 3

    有名管道 无名管道和有名管道: 1. 管道是特殊类型的文件,在满足先入先出的原则写可以读写,不能定位读写位置. 2.管道是单向的. 3.无名管道阻塞于读写位置,而有名管道阻塞在创建位置. 4.无名管道 ...