设置背景的属性是：
- background-image:url(./img/5.jpg);
设置平铺的属性是：
- background-repeat:no-repeat;
background-repeat有以下四个属性
- repeat（平铺）
- no-repeat（不平铺 即：如果图片尺寸不足以填满盒子时图片与左上对齐，空白位置保留）
- repeat-x（横向平铺，即：仅填充横向空白区域）
- repeat-y（纵向平铺，即：仅填充纵向空白区域）
背景图片默认状态下是平铺的，请看以下代码：
一、设置背景和设置背景图片
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景平铺background-repeat属性讲解</title>
</head>
<body>
<style>
div{
width:500px;
height:500px;
/* 背景颜色：background-color */
/* background-color:#f00; */
/* 背景图片：background-image 图片默认是平铺的
即：图片尺寸不足以填充盒子尺寸时，下面和左面重复填充该图片 */
background-image:url(./img/5.jpg);
}
</style>
<div>
背景background相关属性
</div>
</body>
</html>
显示结果为：
二、设置平铺属性
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>背景平铺background-repeat属性讲解</title>
</head>
<body>
<style>
div{
width:500px;
height:500px;
/* 设置背景平铺：
background-repeat:repeat;
repeat（平铺）
no-repeat（不平铺 即：如果图片尺寸不足以填满盒子时图片与左上对齐，空白位置保留）
repeat-x（横向平铺，即：仅填充横向空白区域）
repeat-y（纵向平铺，即：仅填充纵向空白区域） */
background-color:#abcdef;
background-repeat:repeat-x;
background-image:url(./img/5.jpg);
}
</style>
<div>
背景background相关属性
</div>
</body>
</html>
显示结果为：
关于平铺的其它属性值在代码中都做了详细的注解，大家可以自己动手练习一下。
|
窥视卡
雷达卡
发表于 2023-1-31 21:05:21
提升卡
置顶卡
沉默卡
喧嚣卡
变色卡
千斤顶
显身卡
发表于 2023-2-16 17:02:04
