CSS 背景(20160822-0022)

原创 2016年08月31日 06:39:49

盒模型的尺寸可以通过两种方式实现可见性,一种是边框,另一种就是背景。

一、设置背景

CSS 背景设置的样式表:

属性 说明 CSS 版本
background-color 颜色 背景的颜色 1
background-image none 或 url 背景的图片 1,3
background-repeat 样式名称 背景图片的样式 1,3
background-size 长度值或其它 背景图片的尺寸 3
background-position 位置坐标 背景图像的位置 1
background-attachment 滚动方式 背景图片的滚动 1,3
background-clip 裁剪方式 背景图片的裁剪 3
background-origin 位置坐标 背景图片的起始点 3
background 复合值 背景简写 1
1、background-color

说明 CSS 版本
颜色 设置背景颜色为指定色 1
transparent 设置背景颜色为透明 1
2、background-image

说明 CSS 版本
none 取消背景图片的设置 1
url 通过 URL 设置背景图片 1
3、background-repeat

说明 CSS 版本
repeat-x 水平方向平铺图像 1
repeat-y 垂直方向平铺图像 1
repeat 垂直和水平方向同时平铺图像 1
no-repeat 禁止平铺图像 1

4、background-position

说明 CSS 版本
top 将背景图片定位到元素顶部 1
left 将背景图片定位到元素左部 1
right 将背景图片定位到元素右部 1
bottom 将背景图片定位到元素底部 1
center 将背景图片定位到元素中部 1
长度值 使用长度指便宜图片的位置 1
百分比 使用百分比便宜图片的位置 1
5、background-size

说明 CSS 版本
auto 默认值,图像以本尺寸显示 3
cover 等比例缩放图像,使图像至少覆盖容器,但有可能超出容器 3
contain 等比例缩放图形,使其宽度、高度中较大者与容器横向或纵向重合 3
长度值 CSS 长度值,比如px、em 3
百分比 比如:100% 3
6、background-attachment

说明 CSS 版本
scroll 默认值,背景固定在元素上,不会随着容器一起滚动 1
fixed 背景固定在视窗上,内容滚动时背景不动 1
7、background-origin

说明 CSS 版本
border-box 在元素盒子内部绘制背景 3
padding-box 在内边距盒子内部绘制背景 3
content-box 在内容盒子内部绘制背景 3

8、background-clip

说明 CSS 版本
border-box 在元素盒子内部裁剪背景 3
padding-box 在内边距盒子内部裁剪背景 3
content-box 在内容盒子内部裁剪背景 3
9、background

解释:背景的简写。完整简写顺序如下:[background-color]    [background-image]    [background-repeat]    [background-attachment]    ([background-position] / [background-size])    [background-origin]    [background-clip]

二、具体代码

@charset "utf-8";

*{
	padding: 0px;
	margin: 0px; 
}
/******************* background-color *******************/
body{
	/*background-color: gray;*/
}
/* 设置元素的背景颜色,属性是颜色值 */
div{
	/*background-color: blue;*/
}

/* 设置背景颜色透明 */
div{
	/*background-color: transparent;*/
}

/******************* background-image *******************/
/* 设置背景图片,其中 url 是图片的路径,如果图片不足以覆盖,则复制扩展 */
body{
	/*background-image: url(../img/default_img.png);*/
}
/* 取消背景图片的设置,这个一般洪灾用在多个 div 批量设置了背景,而其中某一个不需要背景,可以单独设置 none 值取消背景 */
div{
	/*background-image: none;*/
}

/******************* background-repate *******************/
/* 水平方向平铺图像 */
body{
	/*background-image: url(../img/default_img.png);
	background-repeat: repeat-x;*/
}
/* 垂直方向平铺图像 */
body{
	/*background-image: url(../img/default_img.png);
	background-repeat: repeat-y;*/
}
/* 水平和垂直方向平铺图像,默认 */
body{
	/*background-image: url(../img/default_img.png);
	background-repeat: repeat;*/
}
/* 禁止平铺 */
body{
	/*background-image: url(../img/default_img.png);
	background-repeat: no-repeat;*/
}

/******************* background-position *******************/
/* 将背景图片至于页面上方 */
body{
	/*background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-position: top;*/
}
/* 将背景图片至于页面下方,此时你会发现不管用,因为此时 body 没有设置高度,需要设置 height 属性 */
body{
	/*background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-position: bottom;*/
}
/* 将背景图片至于右上角 */
body{
	/*background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-position: top right;*/
}
/* 第一个表示左边,第二个表示上边。可以使用长度值或者百分比 */
body{
	/*background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-position: 30px 80px;*/
}

/******************* background-size *******************/
/* 等比例缩放图像,使图像至少覆盖容器,但有可能超出容器。使用 cover 相当于 100%,全屏铺开一张大图,这个值很使用。在等比缩小的过程中,可能会有背景超出。 */
div{
	/*background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-size: cover;*/
}

/* 等比例缩放图像,使其宽度、高度中较大者与容器横向或横向重合。使用 contain 表示,尽可能的让图片完整的现实在元素内。 */
div{
	/*width: 600px;
	height: 500px;
	border: solid 1px black;
	background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-size: contain;*/
}
/* 长度值用法,分别表示长和高 */
div{
	/*width: 600px;
	height: 500px;
	border: solid 1px black;
	background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-size: 300px 100px;*/
}

/******************* background-size *******************/
/* scroll,默认值,背景固定在元素上,不随着内容一起滚动 */
body{
	/*border: solid 1px black;
	background-image: url(../img/default_img.png);
	background-repeat: repeat;
	background-attachment: scroll;*/
}
/* fixed,背景固定在视窗上,内容滚动时背景不动。fixed 属性会导致背景产生水印效果,拖动滚动条而背景不动。 */
body{
	/*border: solid 1px black;
	background-image: url(../img/default_img.png);
	background-repeat: repeat;
	background-attachment: fixed;*/
}
/******************* background-origin *******************/
/* 设置背景的起始位置,相对于边框来定位 */
div{
	/*margin: 20px;
	padding: 30px;
	width: 500px;
	height: 300px;
	border: dotted 10px black;
	background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-origin: border-box;*/
}
/* 设置背景的起始位置,相对于内边距来定位 */
div{
	/*margin: 20px;
	padding: 30px;
	width: 500px;
	height: 300px;
	border: dotted 10px black;
	background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-origin: padding-box;*/
}
/* 设置背景的起始位置,相对于内容框来定位 */
div{
	/*margin: 20px;
	padding: 30px;
	width: 500px;
	height: 300px;
	border: dotted 10px black;
	background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-origin: content-box;*/
}
/******************* background-clip *******************/
/* 在内边距盒子内部裁剪背景 */
div{
	/*margin: 20px;
	padding: 30px;
	width: 100px;
	height: 300px;
	border: dotted 10px black;
	background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-clip: padding-box;*/
}
/* 背景被裁减到内容框 */
div{
	/*margin: 20px;
	padding: 30px;
	width: 100px;
	height: 300px;
	border: dotted 10px black;
	background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-clip: content-box;*/
}
/* 背景被裁减到边框盒 */
div{
	/*margin: 20px;
	padding: 30px;
	width: 100px;
	height: 300px;
	border: dotted 10px black;
	background-image: url(../img/default_img.png);
	background-repeat: no-repeat;
	background-clip: border-box;*/
}
/******************* background,简写 *******************/
/* [background-color]    [background-image]    [background-repeat]    [background-attachment]    ([background-position] / [background-size])    [background-origin]    [background-clip] */
div{
/*	margin: 20px;
	padding: 30px;
	width: 500px;
	height: 300px;
	border: dotted 10px black;
	background: silver url(../img/default_img.png) no-repeat scroll left top/100% border-box content-box;
*/}



示例代码地址

版权声明:本文为博主原创文章,未经博主允许不得转载。

生活号- 做本地号,本地的资源和背景是重中之重

地区大号如何样?编辑/创意/产品/运营一个不能少! 4活动增粉 比如你公司做一个最帅用户的评选,让每个参赛人员去拉票,但是这个前提你得有一定的用户数。这个基数是必要的。。。。 5投机取巧 ...
  • gnicky
  • gnicky
  • 2016年06月20日 15:20
  • 353

eclipse导航栏背景颜色修改css

  • 2017年11月02日 15:29
  • 3KB
  • 下载

学习注水-20160822-CCNA To CCNP 日结小记-高级eigrp/用于IPv6的EIGRP及命名EIGRP的层级结构

高级eigrp/用于IPv6的EIGRP及命名EIGRP的层级结构

CSS给文字链接加个漂亮的背景

  • 2013年12月12日 19:42
  • 840B
  • 下载

websphere部署war报错:发生 IWAE0022E Exception

环境: Red Hat Enterprise Linux AS release 4 (Nahant) Name                     IBM WebSphere Applicat...

css背景属性案例

  • 2012年12月09日 19:57
  • 136KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:CSS 背景(20160822-0022)
举报原因:
原因补充:

(最多只允许输入30个字)