案例:
做一個(gè)以圖片為背景, 上面放有標(biāo)題的菜單.
在 UniAPP 中言疗，<image> 標(biāo)簽用于顯示圖片勤哗，但它不支持直接嵌套其他標(biāo)簽. --所以不能使用 Image 直接嵌套
一. 靜態(tài)背景
- 可以在一個(gè) view 元素上使用 style 屬性昌渤，并通過 background-image 樣式來設(shè)置背景圖片。例如：
.background-image-view {
width: 100%;
height: 200px; /* 根據(jù)你的需求設(shè)置高度 */
background-image: url('/static/your-image.png');
background-size: cover; /* 或者 'contain', 根據(jù)你的需求設(shè)置 */
background-position: center;
}
- 使用 image 標(biāo)簽和絕對(duì)定位.
可以通過絕對(duì)定位來將 image 標(biāo)簽放置在 view 標(biāo)簽的背后。
<view class="container-view">
<image class="background-image" src="/static/your-image.png" mode="aspectFill"></image>
<!-- 其他內(nèi)容 -->
<text>這是覆蓋在圖片上的文字</text>
</view>
CSS布局
.container-view {
position: relative;
width: 100%;
height: 200px; /* 根據(jù)你的需求設(shè)置高度 */
}
.background-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: -1; /* 確保圖片在其他內(nèi)容之下 */
}
二. 動(dòng)態(tài)背景
使用內(nèi)聯(lián) :style 修改 backgroundImage 作為背景圖片, 以實(shí)現(xiàn)背景圖片的動(dòng)態(tài)切換;
<view class='cover' :style="{ backgroundImage: 'url(' + myImg + ')' }"> 內(nèi)容 </view>
data() {
myImg : '././static/home/bg.png',
}
CSS
. cover {
background-repeat: no-repeat;
background-size: 100% 100%;
}
