微信小程序wxss background

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

微信小程序里遇到一个关于background的小问题,记录一下啦。
看,这是问题:

微信小程序background-image,前端,javascript,html
解决的方法:
其实人家已经告诉了解决方法 但是我愿意再抄一遍
1.把background属性 写为

<image class="imagesstyle" src="../../imgs/test.png"></image>

采用 image 组件 沉底的方式实现

<view>

<image class="imagesstyle" src="../../imgs/test.png"></image>

<text class='textstyle'> 这是一个测试 </text>

</view>

/**index.wxss**/
.imagesstyle{
  width:400rpx;
  height:400rpx;
  position:fixed;
  z-index:1;  
}

.textstyle{
  font-size:40rpx;
  position:fixed;
  color:red;
  z-index:2;
  }

微信小程序background-image,前端,javascript,html

2.微信小程序view background-image 不能够直接显示本地,但是可以直接显示网络图片

.teststycleone{
  width: 100%;
  height: 800rpx;
  background-image: url('https://gimg2.baidu.com/image_search/src=http%3A%2F%2Flmg.jj20.com%2Fup%2Fallimg%2F1114%2F041621122252%2F210416122252-1-1200.jpg&refer=http%3A%2F%2Flmg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1669519459&t=ad5831f1aef8aa5554bcb2a06e416000');
  background-position: center;
}

3.将本地图片转化成base64方式引用图片
转化图片的网址https://www.bejson.com/ui/image2base64/

.viewstyle{
    width: 300rpx;
    height: 300rpx;
    background-repeat: no-repeat;
    background-size: 100% 100%;
    background-images:url('base64码')
);

微信小程序background-image,前端,javascript,html
微信小程序background-image,前端,javascript,html文章来源地址https://www.toymoban.com/news/detail-569679.html

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

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

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

相关文章

  • 微信小程序-----wxss模版样式

    微信小程序-----wxss模版样式

    目录 前言 一、WXSS 1. 什么是 WXSS 2. WXSS 和 CSS 的关系 二、rpx 1. 什么是 rpx 尺寸单位 2. rpx 的实现原理 3. rpx 与 px 之间的单位换算 三、样式导入 1. 什么是样式导入 2. @import 的语法格式 四、全局样式和局部样式 1. 全局样式 2. 局部样式         上一期我们学习了wxml的模版语法,

    2024年01月17日
    浏览(12)
  • 微信小程序 样式和全局配置
WXSS

    微信小程序 样式和全局配置 WXSS

    wxss 把屏幕分为750个物理像素,大屏大,小屏小,随着设备不一致自动适配 推荐使用iPhone6作为标准,1个rpx = 0.5个px,把px乘以2就是rpx的参数 导入外部样式表  样式  权重一样时,局部样式可以覆盖全局样式 导航栏区域 navigationBar 背景区域 backgroud 页面主体区域 可以配置【导

    2024年02月15日
    浏览(18)
  • 微信小程序 background多个background背景图叠加以及连写注意事项

    微信小程序 background多个background背景图叠加以及连写注意事项

    background: url(\\\'https://xxxxxxxx.com\\\') no-repeat top/100% auto,linear-gradient(318deg, #3F0000 0%, #A9143A 100%); 效果: 坑点: 1:多个背景图叠加时(渐变也相当于图片)以逗号分割,越靠前图片叠加时层级越高。网上搜索时发现找到的都是说越靠后层级越高,但我测试的时候确实是越靠前越高。

    2024年02月15日
    浏览(11)
  • 微信小程序中使用SCSS编译WXSS

    微信小程序中使用SCSS编译WXSS

    旧版本的微信小程序是需要导入sass,新版本直接使用配置 !!!!!!!建议二选一去使用,防止冲突目前我使用的是旧版本的配置Sass!!!!!!!!!! 新版本开发者工具中的隐式设置可直接编译插件配置,在project.config.json加入以下代码即可编译SASS(参考项目配置文件 | 微信开放文档) 目前支

    2024年04月16日
    浏览(14)
  • 微信小程序 | 小程序WXSS-WXML-WXS

    微信小程序 | 小程序WXSS-WXML-WXS

    🖥️ 微信小程序 专栏:小程序WXSS-WXML-WXS 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬 ✨ 个人主页:CoderHing的个人主页 🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️ 👉 你的一键三连是我更新的最大动力❤️ 目录 一、WXSS编写程序样式 小程序的样式写法 WXSS支持的

    2024年01月23日
    浏览(17)
  • 微信小程序如何使用scss编译wxss文件

    微信小程序如何使用scss编译wxss文件

    微信小程序开发者工具集成了 vscode 编辑器,可以使用 vscode 中众多的插件,为我们开发微信小程序提供了极大的便利。我们可以借助 easysass 插件实现在微信开发中使用 sass,安装步骤如下。 1.在 vscode 中搜索 easysass 插件并安装 2.导入已安装的vscode扩展 微信开发者工具 视图

    2024年02月08日
    浏览(13)
  • 微信小程序使用scss编译wxss文件的配置步骤

    微信小程序使用scss编译wxss文件的配置步骤

    微信小程序开发者工具集成了 vscode 编辑器,可以使用 vscode 中众多的插件,为我们开发微信小程序提供了极大的便利。 可以借助 easysass 插件实现在微信开发中使用 sass,安装步骤如下。 1、在 vscode 中搜索 easysass 插件并安装 2、在微信开发工具中导入安装的easysass插件 3、修改

    2024年02月09日
    浏览(9)
  • 微信小程序——标签wxml、样式wxss、js、json

    之前学过HTML,里面常用的标签是div、span、img、a,现在小程序里面wxml文件里面写结构,相对应的写法是: div—— view span—— text img—— image a—— navigator 比如跳转: navigator url=\\\"/pages/index/index\\\"/navigator 小程序里的样式wxss和之前的学过的css样式有一些区别: 新增了rpx单位,这

    2024年02月11日
    浏览(15)
  • 【微信小程序】wxml、wxss、js、json文件介绍

    【微信小程序】wxml、wxss、js、json文件介绍

    😉博主:初映CY的前说(前端领域) ,📒本文核心:微信小程序的入门介绍 【前言】书接上回,我们知道了一个小程序的构成结构,接下来我们来进一步学习小程序的目录结构中的.wxml、.wxss、.js、.json。 用于页面的布局结构,相当于网页中 .html 文件 换做网页来说就是我们的

    2024年02月09日
    浏览(13)
  • 【微信小程序】wxss 和 css 、wxml 和 html 区别

    wxss 支持小程序特有的选择器和 样式属性 scroll-into-view cover-view 等 wxss 引入了 rpx 单位,可以根据屏幕宽度进行自适应,使得开发者可以更方便的处理不同尺寸屏幕的适配问题。 wxss 背景图片只能引入外链,不能使用本地图片 wxss 使用 @import 引入 外链样式文件,地址为相对路

    2024年02月19日
    浏览(7)

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

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

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

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

二维码1

领取红包

二维码2

领红包