|
導讀微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一... 微信小程序,簡稱小程序,英文名Mini Program,是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或搜一下即可打開應用。小程序是一種不用下載就能使用的應用,也是一項門檻非常高的創新,經過將近兩年的發展,已經構造了新的小程序開發環境和開發者生態。 這篇文章主要介紹了微信小程序 圖片絕對定位(背景圖片)的相關資料,需要的朋友可以參考下微信小程序 圖片絕對定位 前言: 在小程序中,有時需要用到背景圖片,但是如果使用background-image的話,就無法控制圖片的大小,background-image一般用于將圖片壓縮為1像素的背景圖片,然后自動填充鋪滿。使用背景圖片的話,一般使用一些新的view層,如<image class="jxlogo" src="../../image/jx.png"/>等,但是小程序與html類似,一個不同的 css或wxss會占據一個位置,然后接下來的css或wxss會自動往下排版,但是很多時候這并不是我們想要的,于是需要用的絕對定位。 使用絕對定位,最好使用一個新的wxss將所有子控件包含起來,然后在這個包含所有子控件的wxss中,定義一個屬性 position: relative,在每個子控件中,定義 position: absolute,現在就可以通過絕對定位來修改位置,如top等,以下附上部分wxss代碼: .jx_card{
width: 100%;
height: 295rpx;
background-color:#e6e6e6;
position: relative
}
.jxlogo{
top: 47.5rpx;
margin-left: 50rpx;
width: 200rpx;
height: 200rpx;
float: left;
position: absolute;
}然后附上wxml代碼: <view class="jx_card">
<image style="width: 740rpx; height: 275rpx;margin-left=10rpx;margin-top:10rpx;" mode="{{item.mode}}" src="../../image/優惠券_03.png">
<image class="jxlogo" src="../../image/jx.png"/>
</image>
</view>大概內容就是這樣,主要是通過position先定義定位的類型,然后通過top去找到圖片上的位置,并定義上去。 以上就是本文的全部內容,希望對大家的學習有所幫助,更多相關內容請關注PHP中文網! 相關推薦: 以上就是微信小程序中圖片絕對定位(背景圖片)的方法的詳細內容,更多請關注php中文網其它相關文章! 小程序是一種不需要下載安裝即可使用的應用,它實現了應用“觸手可及”的夢想,用戶掃一掃或者搜一下即可打開應用。 |
溫馨提示:喜歡本站的話,請收藏一下本站!