小編推薦：Fundebug專注於JavaScript、微信小程式、微信小遊戲，Node.js和Java實時BUG監控。真的是一個很好用的bug監控費服務，眾多大佬公司都在使用。

在小程式開發過程中，經常遇到一種情況：頁面中的一個按鈕需要帶有open-type，同時還要靈活地設定這個按鈕的尺寸和背景樣式。

這就意味著，你不能使用<view bind:tap="onBtn"></view再加上css設定一張背景圖來實現。

然後系統的<button>也不是什麼省油的燈。相信大家都幹過這樣的事情：

<!--pages/demo/index.wxml-->
<view class="container">
    <button>button</button>
    <button class="btn-0" open-type="contact" plain="true">btn_0</button>
    <button class="btn-1" open-type="contact" plain="true">btn_1</button>
    <button class="btn-2" open-type="contact">btn_2</button>
    <button class="btn-3" open-type="contact">btn_3</button>
    <button class="btn-4" open-type="contact">btn_4</button>
</view>
 

/* pages/demo/index.wxss */

button {
    width: 488rpx;
    height: 65rpx;
    margin-top: 20rpx;
}

.btn-0 {
    border: none;
}

.btn-1::after {
    border: none;
}

.btn-2 {
    border: none;
}

.btn-3::after{
    border: none;
}

.btn-4::after{
    border: none;
    background-image: url('https://res.groooo.com/yaj_home_btn_more.png');
    background-size: 100%;
}
 

image.png

哎呀，不小心透漏劇情。

所以要滿足剛剛的需求，應該如此

<button class="btn"></button>

.btn::after {
    border: none;
    background-image: url('https://res.groooo.com/yaj_home_btn_more.png');
    background-size: 100%;
}

當然，看了這麼久，只知道這個，肯定不划算。你一定很想知道這裡面的::after是幹啥的。

詳見:
CSS :after 選擇器
你所不知的 CSS ::before 和 ::after 偽元素用法

作者：1lin24
連結：https://www.jianshu.com/p/ed945a291015

關於Fundebug

Fundebug專注於JavaScript、微信小程式、微信小遊戲、支付寶小程式、React Native、Node.js和Java實時BUG監控。 自從2016年雙十一正式上線，Fundebug累計處理了9億+錯誤事件，得到了Google、360、金山軟體、百姓網等眾多知名使用者的認可。歡迎免費試用！