多语言展示
当前在线:243今日阅读:39今日分享:10

使用CSS3设置背景图片的大小、拉伸、多张背景图

在CSS3中,对background背景的设置增加了一些新设置方法,例如设置背景图片的大小、拉伸、多张背景图。下面介绍如何设置这三种效果。
方法/步骤
1

新建一个html页面,命名为test.html,用于介绍CSS3中background的新用法。

3

在浏览器运行test.html文件,查看效果,成功设置背景图片的大小。

4

使用CSS3拉伸背景图片。同样也是使用background-size来设置,例如,设置背景图片宽度为40%,设置背景图片的高度为100%,代码如下:

5

在浏览器运行test.html文件,查看效果,成功拉伸背景图片。

6

在CSS3中,允许设置多张背景图片,当第一张背景图片无法显示出来的时候,会显示第二张背景图片。代码如下:

7

在浏览器运行test.html文件,查看效果。当3.png背景图片不存在的时候,显示1.png背景图片。

推荐信息