当前阅读教程:微信小程序设计教程 > 背景颜色 | |
阅读(22555525) 收藏 赞(5685) 分享 | |
上一篇: 小程序中样式的几种写法 | 下一篇: 文本 |
CSS 允许应用纯色作为背景。 1.基础语法可以使用 background-color 属性为元素设置背景色。这个属性接受任何合法的颜色值。 这条规则把元素的背景设置为灰色,代码示例 如下: p {background-color: gray;} 如果你希望背景色从元素中的文本与边框有一定的空隙,只需增加一些内边距,代码示例 如下: p {background-color: gray; padding: 20px;} 可以为所有元素设置背景色,这包括 body 一直到 em 和 a 等行内元素。 background-color 不能继承,其默认值是 transparent。transparent 有“透明”之意。也就是说,如果一个元素没有指定背景色,那么背景就是透明的,这样其祖先元素的背景才能可见。 2.小程序应用下面举例说明小程序中如何定义view组件和text组件的背景。 .wxml文件代码示例 如下: <view > <--默认,不做任何定义--> 文本内容01 </view> <view> <--定义view的背景--> 文本内容02 </view> <view> <text class='cls02'>文本内容03</text> <--定义text的背景--> </view> <--定义view的背景,其内嵌套text(也定义背景)--> <view> <text>文本内容04</text> </view> .wxss文件代码示例 如下: .cls01{ background-color: gainsboro; } .cls02{ background-color: goldenrod; } .cls3-1{ background-color: oldlace; } .cls3-2{ background-color: orange; } 效果如图3-6所示。 |
|
上一篇: 小程序中样式的几种写法 | 下一篇: 文本 |