div背景颜色在浏览器模拟移动端状态下显示，在手机移动端状态下不显示

最新推荐文章于 2023-12-19 14:58:11 发布
最新推荐文章于 2023-12-19 14:58:11 发布
阅读量818 收藏
点赞数
分类专栏： 工作学习记录
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/u012083333/article/details/106141592
版权

遇到一个问题是一个div，在浏览器模拟移动端状态下调试，控制显示隐藏和背景颜色都正常，但是在移动端上就不显示背景颜色了。div的子对象显示出了，对比了一下区别

 

  1. background-color: #0b447f         //不显示
  2. background-color: rgba(110, 110, 110, 0.72)!important //显示   

初步判定是两种方式有点什么微小区别，先做记录，后面填坑

GiserYUxiaoyu
关注
专栏目录
div100%平铺 浏览器缩小或在手机上查看 div背景显示不全bug的解决.rar
06-06
div100%平铺 浏览器缩小或在手机上查看 div背景显示不全bug的解决，亲测有效！
Css+Div设置电脑端显示，手机端不显示代码
点滴记忆
08-22 1031
在需要隐藏的区域加一个Div，例如想在手机端隐藏kongbiji这张图片，代码如下： <div class="none"><img src="kongbiji.jpg"/></div> 如果想设置屏幕尺寸达到了 768 像素以下将会隐藏，否则显示。 则把DIV加一个样式代码如下： @media screen and (max-width: 768px) ...
移动端背景色失效解决方法
最新发布
qq_39111074的博客
12-19 734
移动端背景色失效解决方法
html5 取消按键触摸变色,按键变色（event）
weixin_31032799的博客
06-16 441
.wrap {width: 400px;height: 400px;margin: 100px auto 0;}.wrap h1 {text-align: center;}.wrap div {width: 400px;height: 300px;background: pink;font-size: 30px;text-align: center;line-height: 300px;}$(fu...
html的编程语言 背景色,HTML里无法显示背景颜色的解决方法
weixin_31482671的博客
05-31 1003
今天给大家解决一个小问题，对于很多新手来说，有时候布局的背景颜色总是无法显示，我总结了俩个问题，下面给大家举例解答一般布局背景无法显示通常原因如下：1、由使用float浮动造成浮动产生无法显示css背景颜色2、高度不够而产生背景无法显示接下来我们分别介绍无法显示背景颜色或图片的原因和解决方法。css float浮动产生浮动无法显示背景样式颜色假设对一个对象设置了background背景颜色样式，该...
移动端模拟数字键盘，保留两位小数，div模拟光标，div模拟input
07-22
7. **兼容性**：由于我们使用了自定义键盘和div模拟input，所以需要测试在不同浏览器和操作系统上的兼容性，确保在主流设备上正常工作。 8. **安全考虑**：在处理金融数据时，应避免直接在输入框中显示敏感信息。...
手机移动端网页模拟真书翻页
09-27
本文将深入探讨如何在手机移动端网页上实现模拟真书翻页的效果。 真书翻页效果是一种模拟真实书籍翻页体验的技术，它让读者在阅读电子书时仿佛在操作一本真实的书籍。这种效果不仅增强了用户的沉浸感，也提升了阅读...
移动端html5模拟长按事件的实现方法
09-22
本文将详细介绍如何在HTML5中模拟移动端的长按事件，以便在网页应用中实现类似App的交互体验。 首先，我们要理解为何要模拟长按事件。在移动设备上，长按操作通常用于触发上下文相关的菜单或功能，如选择文本、复制...
js移动端手机输入打字机效果
11-11
8. **兼容性测试**：由于JavaScript的实现可能因浏览器而异，需要对主流浏览器进行兼容性测试，确保在各种环境下都能运行良好。 通过以上技术，我们可以构建一个具有打字机效果的输入模块。需要注意的是，在实际...
Vue项目移动端滚动穿透问题的实现
10-15
具体做法是，在固定状态下获取当前body的滚动距离，并用CSS的`position: fixed`和`top`属性来模拟滚动。在非固定状态下，将body恢复到之前的滚动位置。 以下是一个示例代码： ```html <div @click=...
web端背景自适应
weixin_44099060的博客
05-06 275
<div class="wapper"> <div class="header" /> <div class="contain" /> </div> .wapper { height: 100vh; width: 100vw; background: url('../../../assets/images/bg-1X.png') no-repeat; background-size: cover; } .header { heig
html支持移动端自适应,移动端的自适应_html/css_WEB-ITnose
weixin_35817939的博客
06-10 349
最近一个项目做的是微信端，因为之前没接触过一直以为移动端的自适应都是用某个插件，然后里面是分开各种比例的最大多少最少多少，然后里面封装了各种的值多大等等。不过结果却出乎所料的简单。下面将以一个宽为640px的手机分辨率为例，分步解释从一个普通web到移动端的转变(此处只说增/改部分)。第一步：标准设定(1)在html标签里面加入字体设定。html{font: 20px/1.5 微软雅黑, Taho...
CSS----如何设置移动端全屏背景颜色，自适应
weixin_44126737的博客
08-04 1920
在style标签下面，再去下一个style标签 <style> </style> <style> page { background-color: #00ff7f; } </style> <style> </style> <style> page { background-color: #f2f2f2; } </style> 这样就有全屏背景色了。 ...
移动端适配,华为浏览器底色无法正常显示
没得简介
07-31 1452
第一个是不显示背景色的,第二个是正常样式,这里是只有在手机端的华为浏览器出问题。解决看看代码中颜色的值写的是几个f,我写的是。
web前端学习（二）——HTML里的网页的背景、图片
m0_55637498的博客
12-08 5763
一、背景颜色 bgcolor：设置背景色 网页背景颜色的使用：bgcolor=“ ” 二、背景图片 background：设置背景图片 网页背景图片的使用：background=“ ” 三、图片 这里的图片是指在网页上放置一个图片，而不是整个网页的背景图片，两者并不等同。 ...
html自动适配手机屏幕,手机web——自适应网页设计（html/css控制）
weixin_31999597的博客
05-30 5036
一. 允许网页宽度自动调整： "自适应网页设计"到底是怎么做到的？其实并不难。 首先，在网页代码的头部，加入一行viewport元标签。viewport是网页默认的宽度和高度，上面这行代码的意思是，网页宽度默认等于屏幕宽度(width=device-width)，原始缩放比例(initial-scale=1)为1.0，即网页初始大小占屏幕面积的100%。对于viewport属性，我是真正在接触...
点击一个div 隐藏和显示支持手机端的
milijiangjun的博客
11-24 2813
代码如下： Document #nav{ width: 100px; height: 100px; border:1px solid red; } document.onclick=function(ev){ //要隐藏的 div 外点击事件 var ev=window.event||ev; hide('false',ev,'
【HTML】【JS】【CSS】实现可移动div窗体，超出浏览器大小将返回边缘。
南方者的博客
05-28 1049
实现可移动div窗体，出现超出浏览器窗口大小时，将会返回到边缘边界处。实现流程：先创建节点，把节点塞进body内。对该节点进一步进行添加方法。（也可以直接创建好div并加上id，再在js里根据i...
SCSS实现移动端遮罩层及问题解决
"本文主要探讨了在SCSS环境下如何实现移动端页面的遮罩层效果，以及在实际开发中可能遇到的常见问题。通过使用CSS预处理器SCSS，开发者可以更高效地编写代码，并解决了遮罩层与弹窗的布局设计问题。文章提供了具体的...
评论 2
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值