分為兩種,第一種是動態(tài)綁定后臺傳來的圖片乘粒,第二種是我們自己文件夾的圖片
1.綁定后臺傳來的圖片
<div class="img" :style="{backgroundImage: 'url(' + srcImgUrl + ')', backgroundSize:'100% 100%', backgroundRepeat: 'no-repeat'}">
2.文件夾的圖片(注意,這種方式一定要用require的方式)
<div class="assets" :style="{ 'background': 'url(' + require('../../assets/001.png/') + ') no-repeat center center', 'background-size': '100% 100%'}">
3.也可以在data中存儲先,在引用
<div :style="{backgroundImage: 'url(' + src + ')', backgroundSize:'contain'}">
data(){
return{
// 這種方式也要使用require
src: require('../../assets/images/other/002.jog')
}
}
4屬性:
4.1
background-repeat 屬性:背景圖像- 設(shè)置定位與不平鋪
background-repeat:no-repeat;
4.2
background-position:設(shè)置背景圖像的起始位置领猾。
4.3
background-origin:background-Origin屬性指定background-position屬性應(yīng)該是相對位置米同。
4.4
background-size:background-size屬性指定背景圖片大小
語法:background-size: length|percentage|cover|contain;