如何使用css设置背景图的重复与否
时间:2021-08-25 来源:互联网
今天PHP爱好者给大家带来如何使用css设置背景图的重复与否的教程,上一篇文章中我们了解了定位元素背景图像的方法,请看《一招搞定css定位元素的背景图像》。这次我们来了解一下设置背景图重复的方法,有需要的可以参考参考。希望对大家有所帮助。
当我们有一张背景图的时候,如何设置这个背景图的平铺方式呢?
先来看一个小栗子,就拿上篇文章的代码吧。
<style>
p{
background-image: url("images/3.jpg");
background-repeat:no-repeat;
background-position:left;
}
</style>
</head>
<body><p>
<p>为了显示,表明这个一个p元素</p>
<p>为了显示,表明这个一个p元素</p>
<p>为了显示,表明这个一个p元素</p>
<p>为了显示,表明这个一个p元素</p>
<p>为了显示,表明这个一个p元素</p>
<p>为了显示,表明这个一个p元素</p>
<p>为了显示,表明这个一个p元素</p>
<p>为了显示,表明这个一个p元素</p>
<p>为了显示,表明这个一个p元素</p>
<p>为了显示,表明这个一个p元素</p>
<p>为了显示,表明这个一个p元素</p>
<p>为了显示,表明这个一个p元素</p>
<p>为了显示,表明这个一个p元素</p>
<p>为了显示,表明这个一个p元素</p>
</p>
</body>
这个结果是
我们可以看到,这个小例子中的背景图一直都是这张,但是图片出现的次数发生了改变,这是什么原因呢?可以看到,我们修改了background-repeat这个属性的值,今天我们就来说一下这个属性。
background-repeat
属性设置是否及如何重复背景图像。背景图像可以沿着水平轴,垂直轴,两个轴重复,或者根本不重复。默认地,背景图像在水平和垂直方向上重复。重复的图像被剪裁为元素的大小,但它们可以缩放 (使用round
) 或者均匀地分布 (使用space
)。
该属性从原图像开始重复,原图像由background-image
定义,并根据background-position
的值放置。
在这个属性中一共有四个属性值,分别是repeat
,repeat-x
,repeat-y
和no-repeat
。其中,repeat代表背景图像将在垂直方向和水平方向重复;repeat-x代表背景图像将在水平方向重复;repeat-y代表背景图像将在垂直方向重复;no-repeat代表背景图像不重复,只出现一次。
以上就是如何使用css设置背景图的重复与否的详细内容,更多请关注php爱好者其它相关文章!
-
2025年币圈主流交易所Top榜:币安等平台深度评测 2025-10-02
-
酸辣三丝梗是网络流行语,指用酸辣三丝这道菜调侃生活酸甜苦辣的热梗,幽默又接地气。 2025-10-02
-
币安APP:安全合规的数字货币交易平台首选 2025-10-01
-
酸了是什么梗?揭秘年轻人最新羡慕嫉妒的表达方式,看完秒懂! 2025-10-01
-
币安交易所必备工具合集 投资人高效交易软件推荐 2025-10-01
-
币安交易所主流虚拟货币投资指南 安全便捷交易入口 2025-10-01