微信小程序 圖片絕對(duì)定位(背景圖片)
微信小程序 圖片絕對(duì)定位
前言：
在小程序中，有時(shí)需要用到背景圖片，但是如果使用background-image的話，就無(wú)法控制圖片的大小，background-image一般用于將圖片壓縮為1像素的背景圖片，然后自動(dòng)填充鋪滿。使用背景圖片的話，一般使用一些新的view層，如<image class="jxlogo" src="../../image/jx.png"/>等，但是小程序與html類似，一個(gè)不同的 css或wxss會(huì)占據(jù)一個(gè)位置，然后接下來(lái)的css或wxss會(huì)自動(dòng)往下排版，但是很多時(shí)候這并不是我們想要的，于是需要用的絕對(duì)定位。
使用絕對(duì)定位，最好使用一個(gè)新的wxss將所有子控件包含起來(lái)，然后在這個(gè)包含所有子控件的wxss中，定義一個(gè)屬性 position: relative，在每個(gè)子控件中，定義 position: absolute，現(xiàn)在就可以通過絕對(duì)定位來(lái)修改位置，如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/優(yōu)惠券_03.png">
<image class="jxlogo" src="../../image/jx.png"/>
</image>
</view>
大概內(nèi)容就是這樣，主要是通過position先定義定位的類型，然后通過top去找到圖片上的位置，并定義上去。
感謝閱讀，希望能幫助到大家，謝謝大家對(duì)本站的支持！
相關(guān)文章
TypeScript?泛型推斷實(shí)現(xiàn)示例詳解
這篇文章主要為大家介紹了TypeScript?泛型推斷實(shí)現(xiàn)示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
微信小程序 wxapp內(nèi)容組件 icon詳細(xì)介紹
這篇文章主要介紹了微信小程序 wxapp內(nèi)容組件 icon詳細(xì)介紹的相關(guān)資料,并附簡(jiǎn)單實(shí)例，需要的朋友可以參考下2016-10-10
小程序開發(fā)實(shí)戰(zhàn)：實(shí)現(xiàn)九宮格界面的導(dǎo)航的代碼實(shí)現(xiàn)
本篇文章主要介紹了小程序開發(fā)實(shí)戰(zhàn)：實(shí)現(xiàn)九宮格界面的導(dǎo)航的代碼實(shí)現(xiàn)，具有一定的參考價(jià)值，有興趣的可以了解一下。2017-01-01
這篇文章主要為大家介紹了3分鐘精通高階前端隨手寫TS插件的示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要介紹了打包非 JavaScript 靜態(tài)資源，打包工具中的自定義導(dǎo)入，種常見的方法是利用已有的靜態(tài)導(dǎo)入語(yǔ)法。有些打包工具可能會(huì)通過文件擴(kuò)展名來(lái)自動(dòng)檢測(cè)格式，而有些其他打包工具則允許插件使用自定義的 URL Scheme，下面具體內(nèi)舉例說明,需要的朋友可以參考一下2021-10-10
js數(shù)據(jù)類型主要分基本數(shù)據(jù)類型和引用數(shù)據(jù)類型。前者包括Number,String等，后者主要是Object,因此以下會(huì)針對(duì)不同的數(shù)據(jù)類型來(lái)分析,需要的朋友可以參考一下2021-09-09
JS面試中你不知道的call apply bind方法及使用場(chǎng)景詳解
這篇文章主要為大家介紹了JS面試中你不知道的call apply bind方法及使用場(chǎng)景詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-02-02
微信小程序 登錄的簡(jiǎn)單實(shí)現(xiàn)
這篇文章主要介紹了微信小程序 登錄的簡(jiǎn)單實(shí)現(xiàn)的相關(guān)資料,需要的朋友可以參考下2017-04-04
這篇文章主要為大家介紹了ECharts的三維可視化及在微信小程序中使用示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-12-12
一文了解JavaScript用Element?Traversal新屬性遍歷子元素
這篇文章主要介紹了一文了解JavaScript用Element?Traversal新屬性遍歷子元素，文章圍繞Element?Traversal新屬性的相關(guān)資料展開詳細(xì)內(nèi)容,需要的朋友可以參考一下，希望對(duì)大家有所幫助2021-11-11