多重背景图片（background属性缩写）

最新推荐文章于 2022-11-30 16:04:28 发布

407指导员

最新推荐文章于 2022-11-30 16:04:28 发布

阅读量722

点赞数

分类专栏： CSS3 文章标签： css3

本文链接：https://blog.csdn.net/LIUCHUANQI12345/article/details/110662173

版权

CSS3 专栏收录该内容

77 篇文章 0 订阅

订阅专栏

多重背景图片

格式

background: url("images/animal1.png") no-repeat,url("images/animal2.png") no-repeat;

在这里插入图片描述

加入定位属性分开图片

background: url("images/animal1.png") right top no-repeat ,url("images/animal2.png") left top no-repeat ;

在这里插入图片描述

注意点：

1.多张背景图片之间用逗号隔开即可。

2。先添加的背景图片会盖住后添加的背景图片。

3.建议在编写多重背景图片时，拆开编写。

background:
url("images/animal1.png") right top no-repeat ,url("images/animal2.png") left top no-repeat ,url("images/animal3.png") left bottom no-repeat ,url("images/animal4.png") right bottom no-repeat ,url("images/animal5.png") center center no-repeat;

拆开后为

/*专门用来保存图片地址*/
background-image: url("images/animal1.png"),url("images/animal2.png"),url("images/animal3.png"),url("images/animal4.png"),url("images/animal5.png");
/*专门设置是否平铺*/
background-repeat: no-repeat,no-repeat,no-repeat,no-repeat,no-repeat;
/*专门设置背景图片绝对定位*/
background-position: left top,right top,left bottom,right bottom,center center;