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

这篇具有很好参考价值的文章主要介绍了【微信小程序】文章样式,标题样式,及设置背景~。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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

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

小程序标题样式,微信小程序,微信小程序,小程序

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

index.wxml

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

app.wxss

.pubilcTitle{
  text-align: center;
}
.pubilcTitle .en{
  font-size: 86rpx;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--globalColor);
  opacity: 0.3;
}
.pubilcTitle .cn{
  font-size: 56rpx;
  font-weight: 900;
  color: var(--globalColor);
  opacity: 0.8;
  transform: translateY(-60rpx);
  -webkit-transform: translateY(-60rpx);
  -moz-transform: translateY(-60rpx);
  -ms-transform: translateY(-60rpx);
  -o-transform: translateY(-60rpx);
}
.pubilcTitle .line{
  display: inline-block;
  text-align: center;
  width: 200rpx;
  height: 4rpx;
  background: var(--globalColor);
  transform: translateY(-40rpx);
  -webkit-transform: translateY(-40rpx);
  -moz-transform: translateY(-40rpx);
  -ms-transform: translateY(-40rpx);
  -o-transform: translateY(-40rpx);
}

index.scss

.about{
padding: 50rpx 30rpx 80rpx;
background:url(https://mp-e2e8b78a-95d9-4df4-b7e0-96de65ee3eb2.cdn.bspapp.com/list1-img1.jpg);
background-size: cover;
.content{
  .row{
  font-size: 32rpx;
  line-height: 1.6em;
  text-indent: 2em;
  padding: 20rpx 0;
  border-bottom: 1px dashed var(--themColor);  
  }
  .row:nth-child(1){
    padding-top: 0;
  }
  .row:nth-last-child(1){
    border-bottom: none;
  }
}
}

注意:

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

1.转换为base64格式类型

2.使用云服务器中的图片:https://unicloud.dcloud.net.cn/pages/login/login?uniIdRedirectUrl=%252Fpages%252Findex%252Findex文章来源地址https://www.toymoban.com/news/detail-732358.html

到了这里,关于【微信小程序】文章样式,标题样式,及设置背景~的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序内嵌h5页面,实现动态设置顶部标题的功能

    一、需求描述 使用HBuilder X作为开发工具,vue作为开发语言,开发微信小程序。微信小程序页面内嵌h5页面,即web-view/web-view标签。通过设置不同url连接地址,设置不同的标题。 二、失败做法 页面A嵌入h5页面,需要给A设置标题。最开始写法是在lonload页面内,使用如下语句实现

    2024年02月04日
    浏览(75)
  • uniapp微信小程序设置背景渐变

    最近有个项目要用到背景渐变,背景渐变主要用到css,代码如下: 实现原理,position:fixed 固定定位、background-image: linear-gradient 线性渐变和 z-index 设置元素的堆叠顺序。

    2024年02月11日
    浏览(43)
  • CSS:浏览器设置placeholder样式 / 微信小程序设置placeholder样式

    一、web 设置placeholder 设置浏览器的placeholder样式 二、微信小程序设置placeholder 在小程序中设置placeholder样式需要使用组件的内置属性。可以通过以下方式设置input和textarea的placeholder样式: 在上面的示例中,placeholder-style属性被设置为一个字符串,包含了CSS样式。在这个字符串

    2024年02月04日
    浏览(64)
  • 微信小程序~如何设置页面的背景色

    众所周知,微信小程序每个页面由.json,.scss,.ts,.wxml这四个文件组成。 有的小伙伴会发现,需要给页面加背景色的时候,只需在此页面的.scss文件中写个page{background-color: #f8f8f8;}就能生效,却不知其所以然。 这是因为 微信小程序的每个页面,都有一个page根标签 ,见“调试

    2024年04月10日
    浏览(50)
  • 【微信小程序】设置页面背景色的方式

    例如将每个页面的默认背景色设置成灰色: app.wxss: 方式一: 在单独的页面中设置背景色样式 xxx.wxss: 方式二: 单个页面最外层包个 view class=\\\"pageContainer\\\"/ view 作为根容器,来设置样式,给定背景色。 xxx.wxml: xxx.wxss: 注: 页面背景色并不是指 navigationBar 的背景色

    2024年02月13日
    浏览(44)
  • 微信小程序设置背景图铺满顶部

    由于微信小程序自带顶部导航栏,导致我们设置背景图时总是无法铺满顶部,其实想要铺满顶部只需要改变一个属性即可。将navigationStyle的默认属性修改为custom 在微信小程序需要设置背景图的文件下的.json文件中设置:

    2024年02月11日
    浏览(133)
  • 微信小程序设置backgroundColor背景色没有改变

    当我们在微信小程序 json 中设置 backgroundColor 时,实际在电脑的模拟器中根本看不到效果。 这是因为 backgroundColor 指的窗体背景颜色,而不是页面的背景颜色,即窗体下拉刷新或上拉加载时露出的背景 如果想改变页面的背景。 page { background-color:#F6F9FF; }

    2024年02月15日
    浏览(47)
  • 【微信小程序】边框的多种样式设置及效果

    一、实线(solid) 实线边框。  二、虚线( dashed ) 虚线边框。 三、点线(dotted)  点线边框。  四、双线(double) 双线边框。  五、凹陷(groove) 凹陷的边框。  六、凸起(ridge) 凸起的边框。  七、内嵌(insert) 内嵌边框。  八、外嵌(outset) 外嵌边框。  

    2024年02月07日
    浏览(49)
  • 微信小程序设置背景图的几种方式

    原本在html中可以通过background-image来设置背景图片 但是在wxss中出现 解决方法 1.使用网络图片: 2.base64格式的图片,访问图片转 BASE64 编码 | 菜鸟工具上传图片生成base64 3.使用标签

    2024年02月11日
    浏览(77)
  • 【实战】前端必会 —— 微信小程序右上角胶囊按钮(标题设置透明后的处理)

    Object wx.getMenuButtonBoundingClientRect() | 微信开放文档 Object wx.getSystemInfoSync() | 微信开放文档 微信小程序右上角的胶囊按钮在正常情况下(正常设置 navigationBarTitleText)没有影响 但是标题部分设置透明(“navigationStyle”: “custom”,)后,问题就出现了 我这边的需求是在最顶部增加

    2024年02月11日
    浏览(54)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包