关闭

CSS 背景(20160822-0022)

标签: backgroundCSS 背景样式示例
260人阅读 评论(0) 收藏 举报
分类:

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

一、设置背景

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;
*/}



示例代码地址

0
0

查看评论
* 以上用户言论只代表其个人观点,不代表CSDN网站的观点或立场
    个人资料
    • 访问:8008次
    • 积分:491
    • 等级:
    • 排名:千里之外
    • 原创:44篇
    • 转载:0篇
    • 译文:0篇
    • 评论:2条
    文章分类
    文章存档
    最新评论