css背景的介绍
background--背景
css背景属性是css的一个属性,可以给页面元素添加背景样式
背景属性可以设置背景的颜色,图片,平铺,位置等
1.背景颜色–background-color
background-color属性定义了元素的背景颜色
语法: background-color:颜色值
注意: 如果你没有设置背景的颜色,系统会默认给你一个透明背景。
示例:
<style>
.box{
width:100px;
height:100px;
background-color:red;
}
</style>
<body>
<div class="box"></div>
</body>
效果如图所示
2.背景图片-- background-image
background-image属性描述了元素的背景图像,优点是非常便于控制位置。
语法:background-image:none| url (url)
none:无背景图(默认的)
url:使用绝对或相对地址指定背景图像
中间的|表‘或’的意思,第一个url必写,第二个才是指定。
示例:
div{
width:280px;
height:120px;
background-image: url(p1.jpg);
}
<body>
<div></div>
</body>
效果如图:
3.背景平铺–background-repeat
background-repeat属性可以对背景图像进行平铺。
语法:background-repeat:repeat(纵向,横向平铺)|no-repeat(不平铺)|repeat-x(横向平铺)|repeat-y(纵向平铺)
对比2中的图是平铺的
则不平铺的图
示例:
div{
width:1000px;
height:800px;
background-image: url(p1.jpg);
background-repeat:repeat;
}
<div></div>
如图所示
4.背景图像位置-- background-position
background-position属性可以改变图片在背景中的位置
语法:background-position:x y;
x坐标与y坐标,可以使用方位名词或精确定位
示例:
div{
width:1000px;
height:600px;
border: 2px solid hsla(0,0%,0%,1.00);//边框的设置
background-image: url(p1.jpg);
background-repeat:no-repeat;
background-position: top center;
}
<div></div>
如图所示:
总结与补充: