html背景图片怎么拼接,【CSS】同时使用多个背景图 |
您所在的位置:网站首页 › 如何让图片拼接 › html背景图片怎么拼接,【CSS】同时使用多个背景图 |
0003.jpg image.png 上面这张图是由3个小图片组合而成的。 在使用多个背景图时,只需把 background-image 属性的值用逗号隔开,列出想用的图像,然后用 background-repeat 定义重复属性,最后用 background-position 定义每张小图的位置。 HTML代码: CSS代码: background-image: url(images/scroll_top.jpg), url(images/scroll_bottom.jpg), url(images/scroll_middle.jpg); background-repeat: no-repeat, no-repeat, repeat-y; background-position: center top, center bottom, center top; scroll_top.jpg image.png scroll_middle.jpg image.png scroll_bottom.jpg image.png 用 background-repeat 和 background-position 定义多个值时,定义的顺序分别对应 background-image 的顺序。 简写: 像上面定义的方式会比较让人困惑,尤其是后期需要重新排版或维护的时候就更烦了。所以很多Web设计师喜欢使用简写形式指定多个背景图。 CSS代码: background: url(images/scroll_top.jpg) center top no-repeat, url(images/scroll_bottom.jpg) center bottom no-repeat, url(images/scroll_middle.jpg) center top repeat-y; 每用一个 url 定义一张图片的时候,就把这个图片的 位置 和 重复方式 都定义好了。 重点: 多个背景图会一层一层叠在一起,像是 Photoshop 里的图层。罗列背景图的顺序决定着哪个图像在上层。列出的第一个图像在最顶层,第二个图像在第二层,最后一个图像在最底层。以前面的代码为例,卷轴的上部(scrollTop.jpg)在卷轴的底部(scrollBottom.jpg)之上,而底部又在卷轴中部(scrollMiddle.jpg)之上。 HTML与CSS 目录:HTML与CSS |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |