CSS如何实现背景图像重复效果


本文摘自PHP中文网,作者藏色散人,侵删。

CSS实现背景图像重复效果的方法:首先创建HTML示例文件并输入基础代码;然后通过“background-image: url(img/154e.png);background-repeat: repeat;”属性实现背景图像重复效果即可。

本文操作环境:Windows7系统、Dell G3电脑、HTML5&&CSS3版。

背景图像重复效果,相信大家都有在各大网站上见过。一个好看的背景图片重复效果,可以使我们的网页样式更加美观,内容更加丰富。我们可以通过CSS中background的相关属性来实现这种效果。

下面我们就通过简单的代码示例,给大家介绍css实现背景图像重复的效果。

代码示例如下:

1

2

3

4

5

6

7

8

9

10

11

12

13

14

15

16

<!DOCTYPE>

<html>

<meta charset="utf-8">

<head>

    <title></title>

    <style type="text/css">

        body{

            background-image: url(img/154e.png);

            background-repeat: repeat;

        }

    </style>

 

</head>

<body>

</body>

</html>

这里我们使用的单张图片如下:

阅读剩余部分

相关阅读 >>

css如何实现背景图像重复效果

更多相关阅读请进入《CSS背景图像重复》频道 >>




打赏

取消

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

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

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

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

评论

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