1. 程式人生 > >微信小程式引入背景圖的三種方法

微信小程式引入背景圖的三種方法

一。微信小程式引入背景圖的三種方法

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>