background-repeat属性怎么用


本文摘自PHP中文网,作者青灯夜游,侵删。

CSS的background-repeat属性是用来设置背景图像如何平铺的。background-repeat:repeat-x表示只有水平位置会重复背景图像;background-repeat:repeat-y表示只有垂直位置会重复背景图像。

CSS background-repeat属性

作用:设置是否及如何重复背景图像。

基本语法:

background-repeat:repeat|repeat-x|repeat-y|no-repeat;

repeat:默认值,背景图像将向垂直和水平方向重复。

repeat-x:只有水平位置会重复背景图像。

repeat-y:只有垂直位置会重复背景图像。

no-repeat:设置背景图片不会重复。

说明:background-repeat 属性定义了图像的平铺模式。从原图像开始重复,原图像由 background-image 定义,并根据 background-position 的值放置。

CSS background-repeat属性的使用示例

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

17

18

19

20

21

22

23

24

25

26

27

28

29

30

31

32

33

34

35

36

37

38

39

40

41

42

43

44

45

46

47

48

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>菜鸟教程(runoob.com)</title>

<style>

.demo1{

    width: 400px;

    height: 150px;

    border: 1px solid red;

    background-image:url('http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/000/024/5c6a4428ea867709.png');

    background-repeat:repeat;

}

.demo2{

    width: 400px;

    height: 100px;

    border: 1px solid red;

    background-image:url('http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/000/024/5c6a4428ea867709.png');

    background-repeat:no-repeat;

}

.demo3{

    width: 400px;

    height: 150px;

    border: 1px solid red;

    background-image:url('http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/000/024/5c6a4428ea867709.png');

    background-repeat:repeat-x;

}

.demo4{

    width: 400px;

    height: 400px;

    border: 1px solid red;

    background-image:url('http://ypimg.muzhuangnet.com/Collect/csharp/upload/article/000/000/024/5c6a4428ea867709.png');

    background-repeat:repeat-y;

}

</style>

</head>

 

<body>

<h3>repeat设置背景图片向垂直和水平方向重复</h3>

<div class="demo1"></div>

<h3>no-repeat设置背景图片不重复</h3>

<div class="demo2"></div>

<h3>repeat-x设置背景图片向水平方向重复</h3>

<div class="demo3"></div>

<h3>repeat-y设置背景图片向垂直方向重复</h3>

<div class="demo4"></div>

</body>

</html>

效果图:

1550471326915227.jpg

1550471332509829.jpg

以上就是本篇文章的全部内容,希望能对大家的学习有所帮助。

以上就是background-repeat属性怎么用的详细内容,更多文章请关注木庄网络博客

相关阅读 >>

css伪类原理是什么

css中怎么把文字加粗

css怎么将鼠标变小手样式

css怎么设置楷体

《css权威指南》怎么样

css如何使用!important规则?(代码示例)

css外链式基本写法是什么

css不生效是什么原因

css实现分页条

css强制文字不换行代码是什么

更多相关阅读请进入《background-repeat》频道 >>




打赏

取消

感谢您的支持,我会继续努力的!

扫码支持
扫码打赏,您说多少就多少

打开支付宝扫一扫,即可进行扫码打赏哦

分享从这里开始,精彩与您同在

评论

管理员已关闭评论功能...