解决CSS设置按钮背景透明后在安卓手机上看却失效的问题

已于 2022-05-16 20:47:56 修改
阅读量2.5k 收藏 1
点赞数
分类专栏： CSS 文章标签： css样式 background-color 背景透明
于 2019-03-22 15:16:39 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42216142/article/details/88742066
版权
本文介绍了在项目中遇到的一个CSS问题，即在安卓手机上设置按钮背景颜色为透明后显示失效。通过查看代码并进行修改，成功解决了这个问题，确保在安卓和iOS设备上都能实现背景透明效果。
摘要由CSDN通过智能技术生成

项目里面做的APP提测试了，今天测试提了一个bug，是说我的会员卡右下角的按钮背景颜色与文字偏离了。

而我根据我们UI的设计做的是设置了按钮背景颜色透明，之前也都在几个手机上测试过没遇到这个问题。

测试遇到这个bug显然是我做的有问题的，

后来我找来同事的安卓手机，然后发现我设置的背景颜色透明失效了…

我做的以及我手机看到的效果如下：
在这里插入图片描述
安卓手机看到的效果如下：
在这里插入图片描述
我设置按钮背景透明度的代码(问题代码)：

background-color: #00000000;

后来解决问题的代码：

background-color: rgba(
最低0.47元/天 解锁文章
晴天'
关注
专栏目录
h5开发网站-css实现页面的背景固定定位；以及安卓ios手机端兼容问题
weixin_48596030的博客
09-05 1165
在页面滚动时，背景图片保持不变，而不是跟随滚动。
Android 子布局超出父布局 子布局点击失效解决方案，安卓开发项目实例
m0_66145114的博客
01-30 997
这里我们点击左侧的“三个点更多”会有二级隐藏菜单弹出。由于组件化的写法，这个二级菜单是属于底部菜单组件所持有。 首先在页面布局上。对于ios，默认是可以透过去的，但是对于android默认是不会透过去，我们需要在xml中配置不剪切属性 android:clipChildren=“false” android:clipToPadding=“false” 或者在css写法中，我们需要添加overflow属性 overflow: ‘visible’, 其次，在事件传递上，这里由于是跨平台开发而非纯h.
android webview css样式不支持,解决低版本安卓系统中webview对css的background写法不兼容问题...
weixin_32133403的博客
05-26 1638
背景对接第三方app的时候发现内嵌网页里面的背景图死活出不来，但是在同一个手机上的微信自带浏览器确是正常的，通过各种尝试终于发现问题，记录一下。对方使用的方式是app里面内嵌一个webview加载我方的手机端页面，这个页面在大部分流行的安卓机器上都使用正常，没有出现过大的样式偏差，但是一放进app里面样式就出现了问题。具体表现是一个div容器的背景图出现不了，背景颜色也没有了。分析首先把原来的代码...
Android 动态设置backGroundColor不生效的原因
08-16 5207
1.在很多业务开发过程中，需要对一些View进行动态配置背景色或者背景图片。背景图片直接下载即可， 设置背景色:setBackgroundColor 有人会发现设置背景色ImagevIew.setBackgroundColor(int color)不起作用 因为设置完内部并没有去刷新，导致虽然设置了但是并不起作用 正确的步骤： 1.imageview.setBackgroundColor(Color.parseColor("#FF8866")); 2.imageview.invalidate()
解决安卓按钮颜色失效问题！添加一个代码就搞定
最新发布
m0_69882358的博客
06-28 95
设置了正确的样式，颜色还是失效。直接在Botton按钮下写。引号里面写自己的想要的颜色。
android 微信底部渐变,css3，背景渐变属性‘gradient’在android版本4.XX微信环境下不起作用...
weixin_33603405的博客
05-26 169
现在想在微信中做翻书的渐变效果，可是发现有问题啊，在iphone版微信中效果很好，可是在android里面页角是方块并且还没有渐变!下面是android系统下微信的效果，很难看我的代码是这么写的$('.turning').css({width: (newTrangleX) + 'px',height: (newTrangleY) + 'px',left: ($nr.width()-newTrang...
iphone clearColor 不起作用问题
SpeedBoy007的专栏
10-26 1169
在ios5以后的程序里，当你设置一个视图 [UIView setBackgroundColor:[UIColor clearColor]]; 但是运行的时候背景却是黑色的 解决办法： 在后面添加一句 [UIView setOpaque:NO]; 就ok了
关于为何ios端页面展示正常但安卓端css样式不生效的可能问题
maker_lan的博客
12-01 436
定位到安卓机有问题后，我们就通过手机调试发现控制台里对应元素的css嵌套被划横线，发现没解析出来才意识到css语法的问题，还是平时用框架写代码多了，中直接用sass语法习惯了。
移动端android上line-height不居中的问题的解决
08-27
在移动端Android设备上，开发人员经常遇到`line-height`不居中的问题，这主要与字体渲染、CSS适配策略以及不同设备的浏览器内核差异有关。`line-height`属性用于设置元素内文本行之间的垂直间距，通常用于实现垂直...
解决Qt在触摸屏下点击按钮 pressed样式表无效的BUG
fa544384733的博客
11-04 1435
BUG现象：On QPushButton Stylesheet , long press event | Qt Forum 在网上找答案很久，百度谷歌都不起作用。 参考文章：https://blog.csdn.net/qq_41673920/article/details/114709185 上面这篇文章并没有解决我的遇到的问题。 后来经过大量打印测试，发现按钮pressed和release事件其实已经发生了。但是为什么没有样式效果呢？ 答案：其实是因为两个事件发生的间隔太短了，导致press.
有些手机不能正常显示某些css属性，我新增一条相同的属性为其增加-webkit-前缀，能够解决问题吗？
m0_66016308的博客
02-23 215
新增一条相同的属性，并为其增加 -webkit- 前缀是一种常见的解决方案，可以解决某些手机不能正常显示某些 CSS 属性的问题。
animate.css 无效
qq_37768929的博客
09-26 1014
引入 npm install animate.css --save main.js 文件中 import animated from 'animate.css' Vue.use(animated) html <div class="animated bounceInLeft"> 测试动画 </div> 但是发现无法实现效果，切当前的版本为4.1.1 经查发现版本4以后，使用名称改为 class="animate__fadeInLeft" 上文中的 class="anima
css3动画在安卓上不生效
热门推荐
shuawanxiao的专栏
05-23 1万+
@keyframes anim{ 0{transform:translate(0,100px);} 100%{transform:translate(0,-50%);} } 就是因为少在动画的起始位置0后面写100%在安卓手机不能生效在苹果手机生效》》》查了很久才发现的》》》 应该写成： @keyframes anim{ 0%{transform:translate(0,100p
css 元素使用背景色加透明度，伪元素背景色不生效问题
agua001的博客
04-18 1342
css 元素使用背景色加透明度，伪元素背景色不生效问题
vue2.0项目中使用CSS3 animation动画在安卓手机上失效解决办法
CloudEmperor
04-24 5258
vue2.0 + webpack做移动端项目，如果在项目中使用了CSS3 animation动画属性，会发现在ios上完全没问题，但是在安卓手机上依然失效，尽管把animation在五大浏览器各种兼容都写了还是不行，原因其实很简答。其实在 vue-cli脚手架package.json配置文件里面就有对浏览器的版本做css的前缀处理"browserslist": [ "&gt; 1%", ...
CSS实现背景透明而背景上的文字不透明
Just Code
10-14 690
在我们设计制作一些网页的时候可能会用到半透明的效果，首先我们可能会想到用PNG图片处理，当然这是一个不错的办法，唯一的兼容性问题就是ie6 下的BUG，但这也不困难，加上一段js处理就行了。但假如我们需要一个半透明遮罩的弹出层，如登陆框、注册框、提示等，这时可能需要整个页面都要被半透 明的遮罩层覆盖，那么如用背景平铺的话，此时此刻也许就不是一个好办法了，图片大了会影响加载速度，图片小了同样会增...
微信小程序animate.css4.x版本在线上不生效解决
xwc999
03-03 479
使用的3.x版本，不需要前缀 例如： animated fadeInDownBig。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值