mjz update

2023-05-28 18:15:33 +08:00
parent 9b75e60571
commit ed6e2d81fb
243 changed files with 11730 additions and 6 deletions
@@ -0,0 +1,102 @@
+---
+title: 背景
+date: 2023-05-28 10:55:38
+permalink: /pages/basics/background
+article: false
+---
+
+## 深色背景
+在 class 中加入 `bg-Red|Orange|...`
+
+```css
+.bg-red  /* 嫣红 #e54d42 */
+.bg-orange  /* 桔橙 #f37b1d */
+.bg-yellow  /* 明黄 #fbbd08 */
+.bg-olive  /* 橄榄 #8dc63f */
+.bg-green  /* 森绿 #39b54a */
+.bg-cyan  /* 天青 #1cbbb4 */
+.bg-blue  /* 海蓝 #0081ff */
+.bg-purple  /* 姹紫 #6739b6 */
+.bg-mauve  /* 木槿 #9c26b0 */
+.bg-pink  /* 桃粉 #e03997 */
+.bg-brown  /* 棕褐 #a5673f */
+.bg-grey  /* 玄灰 #8799a3 */
+.bg-gray  /* 草灰 #aaaaaa */
+.bg-black  /* 墨黑 #333333 */
+.bg-white  /* 雅白 #ffffff */
+```
+
+## 浅色背景
+在 class 中加入 `bg-Red|Orange|...`
+在 class 中再加入 `light`
+
+```css
+.light .bg-red  /* 嫣红 #e54d42 */
+.light .bg-orange  /* 桔橙 #f37b1d */
+.light .bg-yellow  /* 明黄 #fbbd08 */
+.light .bg-olive  /* 橄榄 #8dc63f */
+.light .bg-green  /* 森绿 #39b54a */
+.light .bg-cyan  /* 天青 #1cbbb4 */
+.light .bg-blue  /* 海蓝 #0081ff */
+.light .bg-purple  /* 姹紫 #6739b6 */
+.light .bg-mauve  /* 木槿 #9c26b0 */
+.light .bg-pink  /* 桃粉 #e03997 */
+.light .bg-brown  /* 棕褐 #a5673f */
+.light .bg-grey  /* 玄灰 #8799a3 */
+```
+
+## 渐变背景
+在 class 中加入 `bg-gradual-red|orange|...`
+
+```css
+.bg-gradual-red /* 魅红 #f43f3b - #ec008c */
+.bg-gradual-orange /* 鎏金 #ff9700 - #ed1c24 */
+.bg-gradual-green /* 翠柳 #39b54a - #8dc63f */
+.bg-gradual-blue /* 靛青 #0081ff - #1cbbb4 */
+.bg-gradual-purple /* 惑紫 #9000ff - #5e00ff */
+.bg-gradual-pink /* 霞彩 #ec008c - #6739b6 */
+```
+
+## 图片背景
+在 class 中加入 `bg-img bg-mask`
+
+> css 代码
+```css
+.bg-img    把背景图片放大到适合元素容器的尺寸，图片比例不变，但是要注意，超出容器的部分可能会裁掉。
+.bg-mask   在背景图片加一层黑色遮罩
+
+.bg-shadeTop   背景图片加一层黑色遮罩上面开始
+.bg-shadeBottom 背景图片加一层黑色遮罩下面开始
+```
+
+> 演示代码
+```vue
+<view class="bg-img bg-mask flex align-center" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10006.jpg');height: 414upx;">
+    <view class="padding-xl text-white">
+        <view class="padding-xs text-xxl text-bold">
+            钢铁之翼
+        </view>
+        <view class="padding-xs text-lg">
+            Only the guilty need fear me.
+        </view>
+    </view>
+</view>
+```
+
+## 透明背景（文字层）
+
+在 class 中加入 `bg-shadeBottom|shadeTop`
+
+> 演示代码
+```vue
+<view class="bg-img padding-bottom-xl" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10007.jpg');height: 207upx;">
+    <view class="bg-shadeTop padding padding-bottom-xl">
+        上面开始
+    </view>
+</view>
+<view class="bg-img padding-top-xl flex align-end" style="background-image: url('https://ossweb-img.qq.com/images/lol/web201310/skin/big10001.jpg');height: 207upx;">
+    <view class="bg-shadeBottom padding padding-top-xl flex-sub">
+        下面开始
+    </view>
+</view>
+```