• 密码登录
  • 手机登录
社交账号登录
阅读( ) 收藏( ) 加载中~ 我要纠错

代码实例

<!DOCTYPE HTML>
<html>
<head>
<style type="text/css">
p {
  background-image: url("/public/static/admin/logo/logo.png?v=1673331415");
  background-size: 20px 20px;
  background-repeat: repeat-x;
}
</style>
</head>
<body>
  <p>This is a test. <br/>
  This is a test. <br/>
  This is a test. <br/>
  This is a test. <br/>
  This is a test. <br/>
  This is a test. <br/>
  
  This is a test. <br/>
  This is a test. <br/>
  
  </p>
</body>
</html>

尝试一下 »

点击“尝试一下”按钮查看在线实例

我们可以使用 background-repeat 属性控制图像将如何覆盖整个背景区域。

background-repeat 的允许值在下面的列表中描述。

  • repeat-x - 水平重复图像; 图像可能会碎片化。
  • repeat-y - 垂直重复图像; 图像可能会碎片化。
  • repeat - 在两个方向重复图像; 图像可能会碎片化。
  • space - 图像被重复以填充空间而不产生碎片,并且剩余区域被均匀地分配在图像周围。
  • round - 图像被缩放,以便它可以重复而不创建碎片。
  • no-repeat - 图像不重复。

您可以为水平和垂直重复设置值,但如果您只提供一个值,浏览器将在两个方向使用该重复样式。

但对于repeat-x和repeat-y,浏览器将使用无重复样式作为第二个值。


×