重复图像
background-repeat 属性可以重复图像,这对于小图片来说是福音。
background-repeat 属性有6个值:
- 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
>
<
p
>我们能为中国‘996’程序员做些什么?怎样才能能引起西方媒体和政府的关注?</
p
>
<
p
>在程序员圈子里颇有名气的代码托管平台GitHub上,有人发起了一个名为“996.ICU”的项目,意为“工作996,生病ICU”,
“996”即许多企业的程序员工作状态,从上午9点干到晚上9点,每周工作6天。这一项目得到了大量程序员的响应,自从3月26日注册以来,
截至4月2日Star数已突破15万整数关口,表示至少有15万名程序员关注了这个项目。</
p
>
</
body
>
</
html
>