重复图像

background-repeat 属性可以重复图像，这对于小图片来说是福音。

background-repeat 属性有6个值：

SRE实战 互联网时代守护先锋，助力企业售后服务体系运筹帷幄！一键直达领取阿里云限量特价优惠。
  • repeat 背景图像在垂直方向和水平方向都重复
  • repeat-x 背景图像在水平方向重复
  • repeat-y 背景图像在垂直方向重复
  • scroll 背景图像随着滚动页面而动
  • no-repeat 背景图像只显示一次
  • fixed 背景图像固定在页面中一个位置

 下面的代码演示背景图像在水平方向重复。

<!DOCTYPE html> < html >      < head >          < title >重复图像</ title >          < style type = "text/css" >              body {                  background-image: url("https://www.liyongzhen.com//docs/images/header.gif");                  background-repeat: repeat-x;                  color: #665544;                  padding: 20px;}              h1 {                  color: white;}          </ style >      </ head >      < body >          < h1 >软件开发，成就梦想</ h1 >          < h2 >学编程，上利永贞网 https://www.liyongzhen.com/</ h2 >          < p >我们能为中国‘996’程序员做些什么？怎样才能能引起西方媒体和政府的关注？</ p >          < p >在程序员圈子里颇有名气的代码托管平台GitHub上，有人发起了一个名为“996.ICU”的项目，意为“工作996，生病ICU”，          “996”即许多企业的程序员工作状态，从上午9点干到晚上9点，每周工作6天。这一项目得到了大量程序员的响应，自从3月26日注册以来，          截至4月2日Star数已突破15万整数关口，表示至少有15万名程序员关注了这个项目。</ p >      </ body > </ html >
扫码关注我们
微信号：SRE实战
拒绝背锅 运筹帷幄