<img v-for="img in imgs" crossorigin="anonymous" :src="img.src" :title="img.deviceCode+img.time"/>
•
背景
•
background-origin:border-box | padding-box | content-box;
设置背景从哪里开始显示,默认是从padding开始.
•
background-size: auto | <长度值> | <百分比> | cover | contain
取值说明:
1、auto:默认值,不改变背景图片的原始高度和宽度;
2、<长度值>:成对出现如200px 50px,将背景图片宽高依次设置为前面两个值,当设置一个值时,将其作为图片宽度值来等比缩放;
3、<百分比>:0%~100%之间的任何值,将背景图片宽高依次设置为所在元素宽高乘以前面百分比得出的数值,当设置一个值时同上;
4、cover:顾名思义为覆盖,即将背景图片等比缩放以填满整个容器;
5、contain:容纳,即将背景图片等比缩放至某一边紧贴容器边缘为止。
提示:大家可以在右边的编辑窗口输入自己的代码尝试不同取值的效果。
•
background : [background-color] | [background-image] | [background-position][/background-size] | [background-repeat] | [background-attachment] | [background-clip] | [background-origin],...
缩写
•
多重背景加逗号
•
background-position:center;
background-repeat: no-repeat;
background-size: cover;
background-size: contain;
background-size: 100% 100%;
background-image: url(img/girlInBed.jpg);
background-size
background-size: cover;
铺满不拉伸
background-size: contain;
不拉伸,有留白
background-size: 100% 100%;
铺满拉伸
评论区