微信小程式引入背景圖的三種方法
一。微信小程式引入背景圖的三種方法
1.直接在標籤里加上style樣式,加上背景圖:
<view style="background:url('../../img/p.png')"></view>
2.如果想使用外部樣式表引入的話,直接使用background會報渲染層錯誤,可以將圖片上傳到伺服器,然後在使用background
3.直接使用image標籤引用
!
二。微信小程式選擇引入背景圖片位置
<view class="dao_bor " style="background:url('../../images/p.png')-90px -90px no-repeat"></view>
三。CSS3 背景圖片顯示尺寸(放大/縮小背景圖)(background-size) (背景適配 自適應)
<style>
.box {
width: 500px;
height: 500px;
margin: 100px auto;
border: 1px solid #000;
background: url("p.png") no-repeat;
/* 背景圖片顯示尺寸(放大/縮小背景圖) */
background-size: 200px 200px; /* 通過畫素設定 */
background-size: 50% 50%; /* 通過百分比設定 */
background-size: cover; /* 覆蓋:圖片成比例填滿盒子。可用於適配 */
background-size: contain; /* 包含:圖片成比例放大,可能不會填滿盒子。可用於適配 */
}
</style>
總結:先控制好整個背景圖大小,再選擇需要顯示的區域,可填充縮寫的div/view。
<view class="dao_bor " style="background:url('../../images/p.png')-90px -90px no-repeat"></view>