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. shell之进程

    ps     System V 风格  -         -elF         -ef         -eF     BSD            a所有跟终端有关的进程           ...

  2. HDU 6034 Balala Power!（贪心+排序）

    Balala Power! Time Limit: 4000/2000 MS (Java/Others)    Memory Limit: 131072/131072 K (Java/Others) ...

  3. HDU - 2814 Visible Trees

    题意: m*n(1<=m,n<=100000)的森林里,起始点在(1,1),某人从(0,0)点开始看,问能看到多少棵树. 题解: 求出1~x中的每个数与1~y的数中互质的数的总和.用素数筛 ...

  4. 开源作品ThinkJDBC—一行代码搞定数据库操作

    1 简介 ThinkJD,又名ThinkJDBC,一个简洁而强大的开源JDBC操作库.你可以使用Java像ThinkPHP框架的M方法一样,一行代码搞定数据库操作.ThinkJD会自动管理数据库连接, ...

  5. rem布局和hotcss原理分析

    rem布局的开源方案hotcss, 其原理个人理解如下: 手机px = (手机页面宽度/设计稿宽度) * 设计稿px 手机rem = 手机px / fontSize = (手机页面宽度/设计稿宽度) ...

  6. uoj169：元旦老人与数列

    题意:http://uoj.ac/problem/169 sol  :线段树..........蜜汁TLE了一个点,不管了..... 代码抄snowMyDream的,orz........... 线段 ...

  7. 基于RRT的机器人自主探索建图

    一.方法讲解: 本项目分为三个部分:机器人周围一定范围内基于RRT的全局检测, 根据上一步检测的未知区域点执行sklearn.cluster.MeanShift聚类,获取聚类中心: 根据聚类中心计算各 ...

  8. 解决hibernate向mysql插入中文乱码问题（更改MySQL字符集）

    1.首先需要修改mysql数据库的配置文件my.ini,此文件放在mysql根目录下.在此文件下查找default-character-set属性,并将其值更改为utf8(注意:不是utf-8,也要注 ...

  9. Java中Collections的binarySearch方法

    方法一 public static <T> int binarySearch(List<? extends Comparable<? super T>> list, ...

  10. 发布windows服务的批处理

    安装bat: C:\Windows\Microsoft.NET\Framework\v4.0.30319\InstallUtil.exe WatchWinService.exe pause 卸载bat ...