背景
background 背景
background-color 背景色
background-image 背景图片
background-repeat 背景图片是否重复
background-position 背景图片的位置
background-attachment 背景图片是否滚动
- 背景色会铺满整个容器
- 背景不会占用容器的宽高(颜色和图片都不会)
如果div没有宽高,内容可以把容器的宽高撑开
<style>
div{
width:300px;
height:300px;
border:10px solid red;
background-color:green;
background-color:rgba(255,107,35,1);
background-color:#008800; /* #080 */
background-color:transparece;
}
</style>
<div>
</div>
- 背景图片
url(图片的地址)
none:没有背景图(默认)
<style>
div{
width:300px;
height:300px;
border:10px solid red;
background-image:url(images/img.jpg);
background-image:none;
}
</style>
<div>
</div>
- 背景图平铺
no-repeat 不重复平铺
repeat-x 横向平铺
repeat-y 纵向平铺
repeat 全部平铺 (默认)
background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
background-repeat:repeat;`
- 背景图片位置
传数值 : 背景图片离左上角的距离
x 正值/负值
y 正值/负值
传关键字:
x left/right/center
y top/bottom/center
如果只传一个值得话,那另一个值默认为center
如果两个值都不写的话,那默认为0, 0点,左上角
background-position: 50px 50px;
background-position: center 50px;
- 背景是否滚动
scroll 背景图片跟随滚动条滚动(默认)
fixed 背景图片不会跟随滚动条滚动
background-attachment:fixed;
- 背景复合样式
<style>
div{
background-image:url(images/img.jpg);
background-position:left top;
background-repeat:no-repeat;
background-attachment:scroll;
background:green url(images/img.jpg) no-repeat center top;
}
</style>
Post Views:
439
相关