关于backgroung的踩坑日记

最新推荐文章于 2022-07-14 10:37:45 发布
最新推荐文章于 2022-07-14 10:37:45 发布
阅读量412 收藏
点赞数
分类专栏： 学习 文章标签： background taro
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43843384/article/details/86367222
版权

今天在做小程序页面的时候，需要插入一张图片作为全屏的背景图，小程序开发用的是taro框架，在写样式过程中，发现图片插入之后虽然是全屏显示，但是图片内容显示不完整，然后一番百度搜索之后就开始各种样式的调整，但是图片显示效果还是不对劲，后面请教一个10年开发经验的老程序员，一语指出问题所在，原来是我在设置样式的时候即使用了background的单属性又使用了复合属性，因为复合属性用在后面，把前面background-size的属性给覆盖了一直没有生效。
前端小菜鸟周末受难日，解决问题之后好开心(▽)

前端小仙女
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
Taro+Nutui-taro 自定义主题配置不生效的解决方案
weixin_44514665的博客
12-28 3842
配置定制化主题官方提供的具体方法如下： 推荐方法https://nutui.jd.com/#/theme 但是按照官网的配置还是不生效，使用taro版本是3.3.17，@nutui/nutui-taro版本是3.1.8 配置 // vue/cli 3 以上版本修改 vue.config.js 的配置 module.exports = { css: { loaderOptions: { // 给 sass-loader 传递选项 scss
CSS 背景
小赛赛爱吃肉
04-02 3147
文章目录background-colorbackground-imgbackground-repeatbackground-positionbackground-attachment以下属性是 CSS3 新增的内容background-sizebackground-originbackground-clipbackground 简写属性[点我查看CSS背景相关的所有API](https://dev...
Taro scss background-image url路径报错
jessicafan0124的博客
07-14 698
taro scss background-image url路径报错
微信小程序 background-image的图片真机调试和体验版中无法加载
秋楓的博客
03-07 1799
前言 在我的微信小程序项目中,我一般在引用静态本地资源时用相对路径，然后我就碰到一个坑：我在给一个view添加背景图时，本地查看效果正常，但是使用真机调试或者体验版查看是加载不出来的。 原先代码 <view style="background-image:url("../../images/pics/bg_img.png')"> </view> 解决方案 说明:注意不要以...
taro图片上加图片 taro引入背景图语法
lee727n的博客
12-08 1516
需求在一个大图片上，对应的位置贴上一个小图片，打算用relative和absolute方式实现。但是发现image标签上无法加载出image标签 所以才用外层view，view引入背景图，在view上贴图片 <View className='home-top-bg-img' style={{ backgroundImage: `url(${hometop})`, backgroundSize: '100% 100%' }}> <Text c
解决小程序背景图片在真机上不能查看的问题
weixin_30617561的博客
05-10 671
前面我写过一篇关于解决小程序打包代码过大的解决问题，其实也主要的原因是图片过大，进行压缩的方法：链接在此：小程序打包代码包过大的解决方法 这次遇到的问题是，在微信开发工具箱开发时，背景图片都能正常显示。但是在手机预览或者是真机调试的时候，手机上背景图片会不见。 如图：在工具箱处 如图：手机真机调试截图：（丢失图片） 使用安卓...
关于设置background属性图片不显示的原因
ZzzDeIU的技术笔记
05-12 4427
有时候会出现设置android：background属性，结果图片不显示的结果，原因是原图片分辨率太高，把分辨率调低点就可以显示了。
background-size属性详解
热门推荐
少油少盐不要辣
06-05 11万+
css background-size 属性详解，background-size 指定背景图像大小，以象素或百分比显示，当指定为百分比时，大小会由所在区域的宽度、高度以及 background-origin（图片的起始位置） 的位置决定，还可以通过 cover 和 contain 来对图片进行伸缩。 background-size 属性 1、定义： background-size 用来调整背景图像...
RGBonly_BGB_segmentation_BACKGROUNG_
10-01
Segmentation foreground and background
java笔试面试题2带答案.doc
12-07
### Java笔试面试题知识点解析 #### 一、访问修饰符的作用范围 - **Public**: 公开的，可以在任何地方被访问。 - **Protected**: 受保护的，只能在同一包内或者子类中访问。 - **Friendly (Default)**: 默认的（也...
KDropDownMultipleSelection:下拉列表中的一个或多个选择
05-09
KDropDownMultipleSelection 下拉列表中的一个或多个.../ ------------------更改DropDownlist的BackGroung颜色---------------- / [Dropobj SetBackGroundDropDwon_R：0.0 G：108.0 B：194.0 alpha：0.70]; / --
Israeli laws auto-linker-crx插件
04-05
语言:עברית 自动链接以色列法律对查找网站的引用 ... 扩展位将在Backgroung，当您将路由到包含以色列法律名称的某些引用的页面时，将出现一个链接以及上面的一个小弹出窗口，其中包括法律的未来URI。
ios多选项下拉列表(Table)
04-03
/------------------Change BackGroung Color of DropDownlist----------------/ [Dropobj SetBackGroundDropDwon_R:0.0 G:108.0 B:194.0 alpha:0.70]; /------------Delegate Methods-----------------/ For ...
两种图片引用的方式background-image和img的区别
一起的远方的博客
03-14 1万+
1. 是否占位 background-image是背景图片，是css的一个样式，不占位； &lt;img /&gt;是一个块状元素，它是一个图片，是html的一个标签，占位； 2. 是否可操作 （1）background-image是只能看的，只能设置如下属性： background-position: 为每一个背景图片设置初始位置。 这个位置是相对于由 background-origin定义...
taro 引用相对路径图片
weixin_33725722的博客
12-22 8774
直接将相对路径放在src属性中，不起作用， 需要先import进来，最好把图片放到服务器上，然后直接写http路径 错误写法： &lt;Image src="./images/front.png" /&gt; 正确写法: import namedPng from './images/front.png' ... &lt;Image src={namedPng} /&gt; ....
使用Taro框架开发小程序
weixin_33695082的博客
09-18 1368
最近一直在做小程序项目的开发，上手直接就是wepy, 风格跟vue差不多，整体上，还算稳定，开发起来比原生的效率要高一点；很多人也知道，mpvue就是用vue搭建的，但始终觉得，失去了路由的vue，就像失去了灵魂；虽然接下来要给大家安利的框架，也貌似失去了该灵魂- taro框架（Taro 是一套遵循 React 语法规范的 多端开发 解决方案。） taro开发文档： nervjs.github.i...
小程序通过background-image设置背景图片
qq_36935391的博客
02-26 2141
微信小程序通过background-image设置背景：只支持线上图片和base64图片，不支持本地图片；base64图片设置步骤如下：1.在网站http://imgbase64.duoshitong.com/上将图片转成base64格式的文本 2.在WXSS中使用以上文本：background-image: url("data:image/png;base64,iVBORw0KGgo=..."...
关于移动端高度设置满屏的实现
前端小仙女
01-07 1万+
关于移动端高度设置满屏的实现 在开发小程序过程中，如果要设置盒子高度为全屏的话，设置hegiht：100%，属性不起作用，需要在设置的元素外边先定义： height: 100%; width: 100%; position: absolute; top: 0px; bottom: 0px; 然后在给需要的元素也这样设置，最后出来的效果就是宽高100%的啦。 前端小菜鸟，给自己留个笔记先。 ...
// background-image: url("../assets/message/icon_info.png"); background-image: url("../../assets/imgs/backgroung.png");后者报错？
最新发布
06-10
在 CSS 中，使用相对路径引用图片时，路径是相对于 CSS 文件的位置而不是相对于 HTML 文件的位置。因此，如果您的 CSS 文件路径与图片文件路径不在同一目录下，则需要使用 `../` 或 `../../` 等符号来返回上一级或多级目录。 在您提供的两个示例中，第一个路径 `../assets/message/icon_info.png` 可能是相对于 CSS 文件的上一级目录。而第二个路径 `../../assets/imgs/backgroung.png` 可能是相对于 CSS 文件的上两级目录。因此，您需要根据实际情况来确定正确的相对路径。 如果第二个路径依然报错，可能是因为路径中的单词拼写错误或大小写有误导致文件找不到。您可以检查一下路径拼写是否正确，或者尝试将路径中的单词全部改为小写，以确保文件名拼写与实际文件名一致。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值