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

发布于 2017-06-09 18:32:26 字数 30 浏览 1171 评论 3

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

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

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

评论(3

灵芸 2017-07-29 11:56:23 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 00:50:55 2 楼

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

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

灵芸 2017-06-12 01:36:56 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;
}

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

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击“接受”或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。