| background-size?設置背景圖片大小。圖片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同時縮放到元素的可用空間的尺寸。

| background-size: cover;適配屏幕大小

文章樣式，標題樣式，及設置背景~

index.wxml

<view class="about">
<view class="pubilcTitle">
  <view class="en">introduce</view>
  <view class="cn">茶文化館介紹</view>
  <view class="line"></view>
</view>
<view class="content">
<view class="row"> 一、中國茶葉博物館藏品類別除茶葉之外，茶文化載體包括茶器具、茶書畫、茶郵票、茶文化碑帖、茶箱、茶葉廣告單、信函、絲茶銀行紙幣、茶葉運銷單、茶葉包裝紙、茶莊價目表、茶館茶號匾額以及茶俗、茶詩、茶歌、茶舞等與茶相關的古代、近現(xiàn)代物質及非物質文化遺存、遺物都成為博物館的征集和收藏對象。有古今茶葉標本170件、國外茶具349件/套。 [4] 截至2019年末，中國茶葉博物館藏品數(shù)為3865件/套，珍貴文物156件/套。</view>
<view class="row">二、中國茶葉博物館藏品類別除茶葉之外，茶文化載體包括茶器具、茶書畫、茶郵票、茶文化碑帖、茶箱、茶葉廣告單、信函、絲茶銀行紙幣、茶葉運銷單、茶葉包裝紙、茶莊價目表、茶館茶號匾額以及茶俗、茶詩、茶歌、茶舞等與茶相關的古代、近現(xiàn)代物質及非物質文化遺存、遺物都成為博物館的征集和收藏對象。有古今茶葉標本170件、國外茶具349件/套。 [4] 截至2019年末，中國茶葉博物館藏品數(shù)為3865件/套，珍貴文物156件/套。</view>
<view class="row">三、中國茶葉博物館藏品類別除茶葉之外，茶文化載體包括茶器具、茶書畫、茶郵票、茶文化碑帖、茶箱、茶葉廣告單、信函、絲茶銀行紙幣、茶葉運銷單、茶葉包裝紙、茶莊價目表、茶館茶號匾額以及茶俗、茶詩、茶歌、茶舞等與茶相關的古代、近現(xiàn)代物質及非物質文化遺存、遺物都成為博物館的征集和收藏對象。有古今茶葉標本170件、國外茶具349件/套。 [4] 截至2019年末，中國茶葉博物館藏品數(shù)為3865件/套，珍貴文物156件/套。</view>
</view>
</view>

app.wxss

.pubilcTitle{
  text-align: center;
}
.pubilcTitle .en{
  font-size: 86rpx;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--globalColor);
  opacity: 0.3;
}
.pubilcTitle .cn{
  font-size: 56rpx;
  font-weight: 900;
  color: var(--globalColor);
  opacity: 0.8;
  transform: translateY(-60rpx);
  -webkit-transform: translateY(-60rpx);
  -moz-transform: translateY(-60rpx);
  -ms-transform: translateY(-60rpx);
  -o-transform: translateY(-60rpx);
}
.pubilcTitle .line{
  display: inline-block;
  text-align: center;
  width: 200rpx;
  height: 4rpx;
  background: var(--globalColor);
  transform: translateY(-40rpx);
  -webkit-transform: translateY(-40rpx);
  -moz-transform: translateY(-40rpx);
  -ms-transform: translateY(-40rpx);
  -o-transform: translateY(-40rpx);
}

index.scss

.about{
padding: 50rpx 30rpx 80rpx;
background:url(https://mp-e2e8b78a-95d9-4df4-b7e0-96de65ee3eb2.cdn.bspapp.com/list1-img1.jpg);
background-size: cover;
.content{
  .row{
  font-size: 32rpx;
  line-height: 1.6em;
  text-indent: 2em;
  padding: 20rpx 0;
  border-bottom: 1px dashed var(--themColor);  
  }
  .row:nth-child(1){
    padding-top: 0;
  }
  .row:nth-last-child(1){
    border-bottom: none;
  }
}
}

注意：

微信小程序中不支持直接使用本地圖片的形式添加背景圖片：

1.轉換為base64格式類型

2.使用云服務器中的圖片:https://unicloud.dcloud.net.cn/pages/login/login?uniIdRedirectUrl=%252Fpages%252Findex%252Findex文章來源地址http://www.zghlxwxcb.cn/news/detail-732358.html

到了這里，關于【微信小程序】文章樣式，標題樣式，及設置背景~的文章就介紹完了。如果您還想了解更多內(nèi)容，請在右上角搜索TOY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關文章，希望大家以后多多支持TOY模板網(wǎng)！