学习background是基础,但是我相信很多人都没把它玩好,直接上干货。
单图片
background:#ccc url("images/gift_bot.png") no-repeat fixed 10px 50px/90% auto; 10px 50px : 这个是表示距离左边的距离10px,距离顶部距离50px,也可以用%表示,也支持负数-10px 90% auto : 表示图片大小,宽90% 高自适应
对于图片定位的参数设置很有学问,上面默认设置的10px 50px都是从左边和顶部开始的,如果我们需要从右边、底部开始呢,我们可以设置如下:
默认图片定位:background:#ccc url("images/gift_bot.png") no-repeat fixed left 10px top 50px/90% auto; 定位图片从右边、底部开始算距离:background:#ccc url("images/gift_bot.png") no-repeat fixed right 10px bottom 50px/90% auto;
多图片
background:url("images/gift_bot1.png") no-repeat left 50% top 95%/90% auto, url("images/gift_bot2.png") no-repeat right 50% bottom 95%/90% auto, #fff url("images/gift3_bg.png") no-repeat 50% 100%/100% auto
https://sdeno.com/book/css/properties/background/background.htm
混合 background 多图片 混合
