您的位置：首页 > Web前端 > CSS

background属性用法总结

2015-10-22 15:33 441 查看
background用于在一个背景中设置背景属性，像css其他属性一样，有两种表示方法

简写形式，如border：1px solid #ccc；

具体形式，如border-width：10px；

1、简写形式



位置含义解释：

位置①：设置背景颜色（不设置则背景为透明）

位置②：设置背景图片（url）

位置③：设置背景平铺方式，不设置该属性，默认为repeat，背景图像将在垂直方向和水平方向重复。可能的值有（repeat-x, repeat-y, no-repeat）

位置④：设置背景图距左边的距离（默认为0），可能的值（数值表示，%表示，top，left，bottom，center，right表示法），注意center占用两个位置（④⑤）；

位置⑤：设置背景图距上边的距离（默认为0），可能的值（数值表示，%表示，top，left，bottom，center，right表示法），注意center占用两个位置（④⑤）；

位置⑥：设置图片的滚动方式（默认scroll，背景图像会随着页面其余部分的滚动而移动），可能的值为（scroll，fixed）

总结：如果要用这种形式，位置①和位置②至少写一个，应该值得注意的是，位置③，④，⑤，⑥都是为了修饰位置②，所以但不写位置②的时候，其他位置也没有写的必要了。

以上位置在写的时候无先后顺序。但是习惯一个好的顺序非常必要。

2、具体形式

1.background-color

用于设置背景颜色，默认元素背景色为透明（transparent）

一共三种表示法，如下：

background-color: red;
background-color: #ccc;
background-color: rgb(255, 255, 255);


2.background-image

设置背景图片，默认无图片

background-image: url(img.png);


3.background-position

设置背景图片的位置，相对于元素进行定位，默认位置左上角（0,0），可以用的表示方法

数值表示，如（10px，10px）；

百分比表示，如（10%， 10%）；

方向位置表示法，

top left
top center
top right
center left
center center（==center）
center right
bottom left
bottom center
bottom right


background-position: top left;
background-position: 10px 10px;
background-position: 10% 10%;


4.background-attachment

设置背景图的滚动方式，默认背景图像会随着页面其余部分的滚动而移动（scroll）

scroll，背景图像会随着页面其余部分的滚动而移动

fixed，当页面的其余部分滚动时，背景图像不会移动

background-attachment: fixed;


5.background-repeat

设置背景图片的平铺显示方式，默认背景图像将在垂直方向和水平方向重复。

repeat，背景图像将在垂直方向和水平方向重复

no-repeat，背景图像将仅显示一次

repeat-x，背景图像将在水平方向重复

repeat-y，背景图像将在垂直方向重复

background-repeat: no-repeat;


至此，简写形式，具体形式的background讲完了，接下来说说background的其他属性

3.background其他属性（复杂）

1.background-size

用于设置背景图的尺寸大小，其实也挺常用的一个属性。默认值auto，其他选项值（数值法，百分比法，cover，contain），详解如下：

数值法，如（10px，10px），含义即（宽，高），当设置第一值时候，第二个值默认auto

百分比法，如（10%，10%），含义即（宽，高），当设置第一值时候，第二个值默认auto

cover，把背景图片扩展至足够大，以使背景图片完全覆盖背景区域。背景图片的某些部分也许无法显示在背景定位区域中。

eg：找到一个370*392大小的图片，做个测试

①当背景图片小于背景区域时

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 200px;
height: 200px;
background-image: url(1111.png);
background-repeat:no-repeat;
border: 20px dotted #ccc;
background-size: cover;
}
</style>
</head>
<body >
<div></div>
</body>
</html>




①当背景图片大于背景区域时

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 400px;
height: 400px;
background-image: url(1111.png);
background-repeat:no-repeat;
border: 20px dotted #ccc;
background-size: cover;
}
</style>
</head>
<body >
<div></div>
</body>
</html>




图看到这里，相信大家已经看出点什么了，在使用background-size:cover时候，总结：

优点：图片不失真（不拉伸变形），整个背景区域不会出现背景色（默认白色），

缺点：图片变得不完整，会隐藏一部分，

无论背景图如何，总会拉伸或压缩，使得背景图完全覆盖背景区域。多余的则向右或向下隐藏。

contain，容纳，即将背景图片等比缩放至某一边紧贴容器边缘为止。（把背景图片扩展至最大尺寸，以使背景图片其宽度和高度完全适应背景区域），

①当背景图片小于背景区域时候，背景就会出现背景色（默认白色），如下图：

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 420px;
height: 420px;
background-image: url(1111.png);
background-repeat:no-repeat;
border: 1px solid red;
}
</style>
</head>
<body >
<div></div>
</body>
</html>




②当背景图片大于背景区域时候，

<!DOCTYPE html>
<html>
<head>
<title></title>
<style type="text/css">
div{
width: 300px;
height: 300px;
background-image: url(1111.png);
background-repeat:no-repeat;
border: 20px dotted #ccc;
background-size: contain;
}
</style>
</head>
<body >
<div></div>
</body>
</html>




通过上面的例子，当时用background-size：contain时候，总结：

优点：背景图不失真（不拉伸变形），且全部出现在背景区域里面

缺点：背景区域会出现背景色（默认白色）。

无论背景图如何，总会拉伸会压缩，使得背景图完全适应背景区域。剩余的区域会出现背景色（默认白色）

2.background-clip（css3新属性）

规定背景的绘制区域，包括背景颜色和背景图片的绘制方法

可选的值：（padding-box，content-box，border-box），效果图如下：





3.background-origin（css3新属性）

规定背景图片的定位位置，通过上下两图可以认真对比background-origin和background-clip的区别

可选的值：（padding-box，content-box，border-box），效果图如下：



background的属性也就总结完了.
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签：  background csss设置背景 网页设置背景 css
相关文章推荐
新的分享
章节导航