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. 爬虫：Scrapy14 - Telnet 终端（Telnet Console）

    Scrapy 提供了内置的 Telnet 终端,以供检查,控制 Scrapy 运行的进程.Telnet 仅仅是一个运行在 Scrapy 进程中的普通 Python 终端.因此你可以在其中做任何是. T ...

  2. 201621123033 《Java程序设计》第6周学习总结

    第六次作业 1. 本周学习总结 1.1 面向对象学习暂告一段落,请使用思维导图,以封装.继承.多态为核心概念画一张思维导图或相关笔记,对面向对象思想进行一个总结. 2. 书面作业 1. clone方法 ...

  3. PHPEXCEL 设置被导出的表格样式代码

    1.设置表格高度.宽度 代码: $objPHPExcel->getActiveSheet()->getRowDimension('6')->setRowHeight(30);//行高 ...

  4. Oracle设置用户密码永不过期

    1.查看用户的profile是那个,一般是default: select username, profile from dba_users; 2.查看指定概要文件(如default)的密码有效期设置: ...

  5. DP———4.完全背包问题（容量为V的背包可装最大价值的问题）

    Piggy-Bank Time Limit: 2000/1000 MS (Java/Others)    Memory Limit: 65536/32768 K (Java/Others)Total ...

  6. dedeCMS常用功能板块记忆

    1.自动调到栏目第一个子栏目 <script> {dede:channel type='son' row='1'} window.location.href='[field:typelin ...

  7. linux下挂载U盘【转】

    转自:http://www.cnblogs.com/yeahgis/archive/2012/04/05/2432779.html 一.Linux挂载U盘:1.插入u盘到计算机,如果目前只插入了一个u ...

  8. C++开发资源汇总

    这次的资源涉及到了标准库.Web应用框架.人工智能.数据库.图片处理.机器学习.日志.代码分析等,C++程序员学习必备! Jason frozen : C/C++的Jason解析生成器 Jansson ...

  9. Linux 根据组来划分账号,根据部门同一账号的组,同一组下拥有同一权限

    #新机器添加 #创建部门组与账号 useradd testgroup #创建员工账号加入到部门组里 useradd -g testgroup user1 #员工在/data目录下创建的默认权限为774 ...

  10. flask框架基本使用(3)(session与cookies)

    #转载请留言联系 flask 框架基本使用(1):https://www.cnblogs.com/chichung/p/9756935.html flask 框架基本使用(2):https://www ...