背景图片的各种属性:
1、background-repeat:设置图片平铺方式。有三个属性:no-repeat(图片保留自身大小不平铺)、repeat-x(图片在水平方向上平铺)、repeat-y(图片在垂直方向上平铺)
2、background-position:确定图片显示的位置。
background-position: 30px 50px; 图片在水平方向上向右偏移30px,在垂直方向上偏移50px
background-position: right bottom; 图片显示在右下角
background-position: center; 图片显示在中间
background-position: right top; 图片显示在右上角
background-position: left bottom; 图片显示在左下角
background-position: center top; 图片显示在上中间
3、background-size:背景图片的大小
background-size: 100% 100%; 背景图片的大小
background-size: contain; contain:图片宽高等比例缩放,直到宽或高填满父布局,有可能出现布局填充不完整。
background-size: cover; cover:图片宽高等比例缩放,直到较小的宽或高填满父布局,可能出现图片溢出。
代码示例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<style>
div{
height: 400px;
border: 1px solid red;/*1px的红色实线*/
background-color: blue;
background-image: url("../../img/lianxiang.jpg");
background-repeat: no-repeat;/*1、no-repeat 图片保留自身大小,不平铺
2、repeat-x 水平方向上图片平铺
3、repeat-y 垂直方向上图片平铺*/
background-position: center top;
/*background-size: 100% 100%;*/ /*背景图片的大小*/
/*background-size: contain;*//*contain:图片宽高等比例缩放,直到宽或高填满父布局,有可能出现图片填充布局不完整*/
background-size: cover; /*cover:图片宽高等比例缩放,直到较小的宽或高填满父布局,可能出现图片溢出*/
}
</style>
<title>背景图片</title>
</head>
<body>
<div>
</div>
</body>
</html>
代码运行结果: