位置:电子教程 > 微信小程序设计教程 (如果看不到内容请使用360浏览器) 推荐学习资源
小程序样式基础
框模型
定位
选择器
当前阅读教程:微信小程序设计教程 > 背景颜色
阅读(22555525)      收藏       赞(5685)      分享
上一篇: 小程序中样式的几种写法 下一篇: 文本

CSS 允许应用纯色作为背景。

1.基础语法

可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。

这条规则把元素的背景设置为灰色,代码示例

小白教程网www.2d5.net

如下:

p {background-color: gray;}

如果你希望背景色从元素中的文本与边框有一定的空隙,只需增加一些内边距,代码示例

小白教程网www.2d5.net

如下:

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

可以为所有元素设置背景色,这包括 body 一直到 em a 等行内元素。

background-color 不能继承,其默认值是 transparenttransparent 有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。

2.小程序应用

下面举例说明小程序中如何定义view组件和text组件的背景。

.wxml文件代码示例

小白教程网www.2d5.net

如下:

<view > <--默认,不做任何定义-->
  文本内容01
</view>
 
<view> <--定义view的背景-->
  文本内容02
</view>
 
<view>
  <text  class='cls02'>文本内容03</text>  <--定义text的背景-->
</view>
 
<--定义view的背景,其内嵌套text(也定义背景)-->
<view> 
  <text>文本内容04</text>
</view>

.wxss文件代码示例

小白教程网www.2d5.net

如下:

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

效果如图3-6所示

image.png


上一篇: 小程序中样式的几种写法 下一篇: 文本
毕业设计网             广告联系QQ:45157718(微信同号)