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. 冒泡排序js

    //    冒泡排序     var a = [1,3,2,4,5,3,2,1,4,6,7,7,6,6];     var b =[];     for(var i=0;i<a.length;i ...

  2. JSP/Servlet Web 学习笔记 DayFour

    Servlet概述 Servelt是使用Java Servlet应用程序接口及相关类和方法的Java程序. Servlet是用Java编写的Server端程序,它与协议和平台无关.Servlet运行于 ...

  3. 【Linux】- 获取root权限命令

    1:Redhat系统或者Fedora或者CentOs的Linux发行版,那么在Linux终端输入命令回车: su - root 这样就可以切换到root权限了 2:Ubuntu系统,在Linux终端输 ...

  4. RabbitMQ vhost 配置

    RabbitMQ vhost 配置 rabbitmqctl set_vhost_limits是用来定义虚拟主机限制的命令 配置最大连接限制 要限制vhost vhost_name中并发客户端连接的 总 ...

  5. jqury关于cooke的操作写入cookie后只显示一次的DIV提示框代码

    有时候当用户登录系统后,需要给用户弹出提示框,但是不需要总是弹出来,在这里加入访问cookie来判断是否弹出过提示框,如果弹出过那么保存cookie,下次根据cookie是否存在来判断是否弹出 < ...

  6. 如何设置两个AD域控制器

    目的:这要为了测试,哈哈哈哈. 其实是为了AD域控的高可用性.一个域控down了,另一个可以顶上去. 如何设置:参考http://lgzeng2360.blog.51cto.com/275998/10 ...

  7. 用VS2010编写的C++程序，在其他电脑上无法运行的问题

    问题:在自己电脑上用VS2010编写的VC++程序(使用MFC库),不能在其他电脑上运行.双击提示: “无法启动此程序,因为计算机中丢失mfc100u.dll 尝试重新安装该程序以解决此问题. 解决方 ...

  8. 输出读入优化——QAQ

    #include<bits/stdc++.h> const int RN=1e5; ],*ip=ib+RN,ob[RN+],*op=ob; inline int gc(){ ip==ib+ ...

  9. Windows下安装Redis并注册为服务

    1.安装 下载地址:https://github.com/MSOpenTech/redis/releases. Redis 支持 32 位和 64 位.这个需要根据你系统平台的实际情况选择,这里我们下 ...

  10. 飞扬的小鸟（NOIP2014）（丧病DP题）

    原题传送门 刚开始我还以为这道题目非常的简单.. 然后随便打了一个DP,直接WA,被zxyer狠狠地D了一顿. 然后发现有好多细节.. 首先假如某横坐标没有管子,那么l[x]=0;h[x]=m+1; ...