频道栏目
首页 > 程序开发 > web前端 > HTML/CSS > 正文
CSS背景图套路之单一元素设置多背景图的方法
2017-11-14 11:20:52      个评论    来源:LZGS_4的专栏  
收藏   我要投稿

CSS背景图套路之单一元素设置多背景图的方法

如下图需求(图片来自网络):

\

针对以上需求,可以让设计师帮忙把多个扑克牌合成一张图,前端只需求设置一下背景就OK 。

但是,如果设计师只提供了多个分开的扑克牌图片,怎么在同一个元素上设置多个背景图呢?套路很单纯:

.bgSection {
    background: url("1.png"),
                url("2.png"),
                #ffffff;
}

比如:设置一个背景为白色,上下有边框的元素(通过调整背景的位置)

.bgSection {
    background: url("line_top_e6@2x.png") repeat-x 0 top / 1px 1px,
                url("line_bottom_e6@2x.png") repeat-x 0 bottom / 1px 1px,
                #ffffff;
}
点击复制链接 与好友分享!回本站首页
上一篇:ES6在什么情况下不能用箭头函数?
下一篇:npm介绍及基本操作及常用命令介绍
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站