html 关于背景的属性 意义和设置

背景

background              背景
background-color        背景色 
background-image        背景图片
background-repeat       背景图片是否重复
background-position     背景图片的位置
background-attachment 背景图片是否滚动
  1. 背景色会铺满整个容器
  2. 背景不会占用容器的宽高(颜色和图片都不会)
    如果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>
  1. 背景图片
    url(图片的地址)
    none:没有背景图(默认)
<style>
div{
width:300px;
height:300px;
border:10px solid red;
background-image:url(images/img.jpg);
background-image:none;
}
</style>

<div>

</div>
  1. 背景图平铺
no-repeat       不重复平铺
repeat-x        横向平铺
repeat-y        纵向平铺 
repeat          全部平铺 (默认)
background-repeat:no-repeat;
background-repeat:repeat-x;
background-repeat:repeat-y;
background-repeat:repeat;`
  1. 背景图片位置
传数值 :       背景图片离左上角的距离
x           正值/负值
y           正值/负值

传关键字:   
x           left/right/center
y           top/bottom/center

如果只传一个值得话,那另一个值默认为center
如果两个值都不写的话,那默认为0, 0点,左上角
background-position: 50px 50px;
background-position: center 50px;
  1. 背景是否滚动
scroll      背景图片跟随滚动条滚动(默认)
fixed       背景图片不会跟随滚动条滚动
background-attachment:fixed;
  1. 背景复合样式
<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>
打赏

发表评论

此站点使用Akismet来减少垃圾评论。了解我们如何处理您的评论数据