用于设置背景图像不重复的CSS方法
电脑杂谈 发布时间：2020-06-24 21:14:49 来源：网络整理
今天，我有一个人要咨询一个有关在CSS中设置背景图像而不重复的小问题html添加背景图片，并在撰写详细说明CSS如何设置背景图像以及如何设置背景图像显示的教程时给他一个答案.
在CSS中，我们可以使用background属性设置背景图片，例如以下代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>演示背景图片</title>
<style>
body{
background: url(20190621232252.png);
}
</style>
</head>
<!--飞鸟慕鱼博客-->
<body>
</body>
</html>
运行代码后，我们发现背景图像是水平还是垂直重复，直到覆盖整个显示区域.
CSS中有一个background-repeat属性. 您可以设置是否以及如何重复图像的背景图像. 其默认值为水平和垂直. 如果未设置此属性的值，则背景图像类似于上面的示例. 代码相同，它将同时在水平和垂直方向上重复，并覆盖要显示的整个区域.
它可以设置三个值，如下所示，其中重复值是默认值.
重复: 默认. 背景图像将在垂直和水平方向上重复.
repeat-x: 背景图像将水平重复.
重复-y: 背景图像将垂直重复.
不重复: 背景图片仅显示一次.
inherit: 指定背景重复属性设置应从父元素继承.
CSS背景图片仅在水平方向（横向）上重复
CSS代码:
body{
background: url(20190621232252.png);
background-repeat:repeat-x;
}
运行结果如下图，背景图片水平重复
css背景图像垂直重复
CSS代码
body{
background: url(20190621232252.png);
background-repeat:repeat-y;
}
运行结果如下图所示，垂直重复背景图片
CSS背景图片不会重复
CSS代码
body{
background: url(20190621232252.png);
background-repeat:no-repeat;
}
运行结果如下图所示，水平和垂直背景图像将不重复，仅显示一张
background属性还包括background-repeat，background-position，background-colorhtml添加背景图片，background-attachment等属性，因此当我们使用background属性时，可以将其他属性的值写入背景，因此代码更简洁.
示例代码:
body{
background-color: #ccc;
background-image: url(20190621232252.png);
background-repeat: no-repeat;
background-position-x: 20px;
background-position-y: 50px;
}
等效代码
body{
background: #cccc url(20190621232252.png) no-repeat 20px 50px;
}
示例演示效果:
从上面的代码中可以看到，背景颜色，背景图像以及背景图像的显示方法，锚点等都可以写入background属性.
本文来自电脑杂谈，转载请注明本文网址：
http://www.pc-fly.com/a/jisuanjixue/article-257241-1.html
-
-
赵茂竹
我也会选择守护目前来之不易的生活
哪些Android手机系统易于使用
雪景景观
如何在Win7中还原打开模式？如何恢复默认的文件打开方法
网易和华为在哪里使用神圣的手机游戏频道服务？
你的配音简直是整个电影的败笔