• 【微信小程序】文章样式,标题样式,及设置背景~


    | background-size 设置背景图片大小。图片可以保有其原有的尺寸,或者拉伸到新的尺寸,或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。

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

    文章样式,标题样式,及设置背景~

    index.wxml

    1. <view class="about">
    2. <view class="pubilcTitle">
    3. <view class="en">introduceview>
    4. <view class="cn">茶文化馆介绍view>
    5. <view class="line">view>
    6. view>
    7. <view class="content">
    8. <view class="row"> 一、中国茶叶博物馆藏品类别除茶叶之外,茶文化载体包括茶器具、茶书画、茶邮票、茶文化碑帖、茶箱、茶叶广告单、信函、丝茶银行纸币、茶叶运销单、茶叶包装纸、茶庄价目表、茶馆茶号匾额以及茶俗、茶诗、茶歌、茶舞等与茶相关的古代、近现代物质及非物质文化遗存、遗物都成为博物馆的征集和收藏对象。有古今茶叶标本170件、国外茶具349件/套。 [4] 截至2019年末,中国茶叶博物馆藏品数为3865件/套,珍贵文物156件/套。view>
    9. <view class="row">二、中国茶叶博物馆藏品类别除茶叶之外,茶文化载体包括茶器具、茶书画、茶邮票、茶文化碑帖、茶箱、茶叶广告单、信函、丝茶银行纸币、茶叶运销单、茶叶包装纸、茶庄价目表、茶馆茶号匾额以及茶俗、茶诗、茶歌、茶舞等与茶相关的古代、近现代物质及非物质文化遗存、遗物都成为博物馆的征集和收藏对象。有古今茶叶标本170件、国外茶具349件/套。 [4] 截至2019年末,中国茶叶博物馆藏品数为3865件/套,珍贵文物156件/套。view>
    10. <view class="row">三、中国茶叶博物馆藏品类别除茶叶之外,茶文化载体包括茶器具、茶书画、茶邮票、茶文化碑帖、茶箱、茶叶广告单、信函、丝茶银行纸币、茶叶运销单、茶叶包装纸、茶庄价目表、茶馆茶号匾额以及茶俗、茶诗、茶歌、茶舞等与茶相关的古代、近现代物质及非物质文化遗存、遗物都成为博物馆的征集和收藏对象。有古今茶叶标本170件、国外茶具349件/套。 [4] 截至2019年末,中国茶叶博物馆藏品数为3865件/套,珍贵文物156件/套。view>
    11. view>
    12. view>

    app.wxss

    1. .pubilcTitle{
    2. text-align: center;
    3. }
    4. .pubilcTitle .en{
    5. font-size: 86rpx;
    6. font-weight: 900;
    7. text-transform: uppercase;
    8. color: var(--globalColor);
    9. opacity: 0.3;
    10. }
    11. .pubilcTitle .cn{
    12. font-size: 56rpx;
    13. font-weight: 900;
    14. color: var(--globalColor);
    15. opacity: 0.8;
    16. transform: translateY(-60rpx);
    17. -webkit-transform: translateY(-60rpx);
    18. -moz-transform: translateY(-60rpx);
    19. -ms-transform: translateY(-60rpx);
    20. -o-transform: translateY(-60rpx);
    21. }
    22. .pubilcTitle .line{
    23. display: inline-block;
    24. text-align: center;
    25. width: 200rpx;
    26. height: 4rpx;
    27. background: var(--globalColor);
    28. transform: translateY(-40rpx);
    29. -webkit-transform: translateY(-40rpx);
    30. -moz-transform: translateY(-40rpx);
    31. -ms-transform: translateY(-40rpx);
    32. -o-transform: translateY(-40rpx);
    33. }

    index.scss

    1. .about{
    2. padding: 50rpx 30rpx 80rpx;
    3. background:url(https://mp-e2e8b78a-95d9-4df4-b7e0-96de65ee3eb2.cdn.bspapp.com/list1-img1.jpg);
    4. background-size: cover;
    5. .content{
    6. .row{
    7. font-size: 32rpx;
    8. line-height: 1.6em;
    9. text-indent: 2em;
    10. padding: 20rpx 0;
    11. border-bottom: 1px dashed var(--themColor);
    12. }
    13. .row:nth-child(1){
    14. padding-top: 0;
    15. }
    16. .row:nth-last-child(1){
    17. border-bottom: none;
    18. }
    19. }
    20. }

    注意:

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

    1.转换为base64格式类型

    2.使用云服务器中的图片:https://unicloud.dcloud.net.cn/pages/login/login?uniIdRedirectUrl=%252Fpages%252Findex%252Findex

  • 相关阅读:
    索尼 toio™ 应用创意开发征文|小巧机器,大无限,探索奇妙世界
    【洛谷】P1082 同余方程
    vue3中props中数组报错 ‘item‘ is of type ‘unknown‘
    数字信号处理——多速率信号处理(2)
    Redis相关知识
    webpack的简单使用
    STM32HAL库-IWDG篇
    PYTHON 自动化办公:更改图片后缀
    Android 10.0 Launcher3定制化之修改添加的默认文件夹为9宫格样式
    CISSP学习笔记:安全模型的原则、设计和功能
  • 原文地址:https://blog.csdn.net/qq_57676486/article/details/132948300