随身笔记
随身笔记

关于css3的background背景属性

学习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 多图片 混合

https://sdeno.com/wp-content/uploads/2016/09/mix_bg.jpg

sd

不可思议的混合模式 background-blend-mode

随身笔记

关于css3的background背景属性
学习background是基础,但是我相信很多人都没把它玩好,直接上干货。 单图片 background:#ccc url("images/gift_bot.png") no-repeat fixed 10px 50px/90% auto; 10px 50px : 这…
扫描二维码继续阅读
2016-09-26