CSS-如何设置一个页面元素上有多个背景图片?

小组事务管理 小组事务管理 主题:974 回复:1955

CSS-如何设置一个页面元素上有多个背景图片?

夜无邪 发布于 2017-06-09 字数 53 浏览 1076 回复 3

不是一张大图,是几张小图,所以有这个需求,谢谢

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

支持 Markdown 语法,需要帮助?

评论(3

灵芸 2017-07-29 3 楼

一般这种方法是几张图片都是半透明状态,是几张图片的叠加效果:

background:url("../images/fade-2.png") repeat-x scroll 0 100%,
url("../images/pages-visuals/contact-noise.png") repeat scroll 0 0px,
url("../images/project-visuals/portfolio-hitmo-logo-bg.png") no-repeat scroll 50% 220px,
url("../images/fade-4.png") repeat-x scroll 0 100px,
url("../images/pages-visuals/contact-top.png") no-repeat scroll 50% 0 #8CD04A;

虐人心 2017-07-03 2 楼

CSS3的用法:
background-image: url(top.jpg), url(middle.jpg), url(bottom.jpg)

第一个声明的图片定位在元素顶部,其它的图片按序在其下排列

灵芸 2017-06-12 1 楼

举个例子:

yourdiv {

background: url(image_1.png) top left no-repeat,
url(image_2.png) bottom left no-repeat,
url(image_3.png) bottom right no-repeat;

}

主要需要关注的是位置信息。