1. 程式人生 > >微信小程式介面設計入門課程-樣式wxss中使用css課程-背景 background-color 使用教程

微信小程式介面設計入門課程-樣式wxss中使用css課程-背景 background-color 使用教程

語法

CSS 允許應用純色作為背景,也允許使用背景影象建立相當複雜的效果。
可以使用 background-color 屬性為元素設定背景色。這個屬性接受任何合法的顏色值。 這條規則把元素的背景設定為灰色:

p {background-color: gray;}

如果您希望背景色從元素中的文字向外少有延伸,只需增加一些內邊距:

p {background-color: gray; padding: 20px;}

可以為所有元素設定背景色,這包括 body 一直到 em 和 a 等行內元素。 background-color 不能繼承,其預設值是 transparent。transparent 有“透明”之意。也就是說,如果一個元素沒有指定背景色,那麼背景就是透明的,這樣其祖先元素的背景才能可見。

小程式應用

Wxml程式碼

<view >
  文字內容01
</view>

<view class='cls01'>
  文字內容02
</view>

<view>
  <text  class='cls02'>文字內容03</text>
</view>

<view class='cls3-1'>
  <text class='cls3-2'>文字內容04</text>
</view>

Wxss程式碼

.cls01{
  background-color:  gainsboro;
}
.cls02{
  background-color: goldenrod;
}
.cls3-1{
  background-color: oldlace;
}
.cls3-2{
  background-color: orange;
}

效果下圖
在這裡插入圖片描述

歡迎大家收看我的視訊教程:微信小程式樣式入門到精通(wxss,css)(微信小程式介面設計必備技能)
微信小程式介面設計入門課程-樣式wxss中使用css課程-背景 background-color 使用教程