React元素设置背景图片,打包后,背景图不显示了,小bug修复日记

一个背景图元素的css是这样写的:(连接只是示意,真实图片地址是有效存在的,不是图片路径问题)

.back
{
  background: url('https:www.xxx.com/xxx.jpg') no-repeat center center fixed;
  opacity: 18%;
  background-size: cover;
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}

yarn build 发布了网站以后,发现图片不显示.于是查看了生成build目录下的static目录下的css下的

main.163863ab.chunk.css

发现 这个css是这样写的

App_back__3NYkX{background:url(https://www.xxx.com/xxx.jpg) no-repeat 50% fixed;opacity:18%;

我就很奇怪 是不是url()函数没有加""双引号?

加上以后 没效果.

接着往下看  竟然发现 

opacity:1%

我的天 我的眼睛也真是够尖的!!!

不知道为什么打包的时候把18%的透明度打包成了1%.

而且我又测试了一次 打包完以后   还是18%的透明度打包成了1%

具体原因尚不明确,我直接把生成的

main.163863ab.chunk.css

里面改了一下  可以了..原来是1%的透明度我根本就看不见  并不是没展示

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Afterwards_

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值