解决h5页面点击元素出现灰色背景

最新推荐文章于 2022-12-01 16:20:13 发布
最新推荐文章于 2022-12-01 16:20:13 发布
阅读量7.1k 收藏 2
点赞数
文章标签： 点击元素背景变透明 点击背景变灰
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhaoshuang1010/article/details/79084996
版权

/*背景变灰*/

css文件加上这句即可：

div {-webkit-tab-highlight-color: rgba(0,0,0,0); } 

zhaoshuang1010
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
H5 页面整体变灰色的的代码
05-01
NULL 博文链接：https://onestopweb.iteye.com/blog/2373464
h5页面置灰
weixin_46155697的博客
05-08 565
页面置灰 实现页面整体置灰效果（非所有页面细节） html { filter: grayscale(100%); -webkit-filter: grayscale(100%); -moz-filter: grayscale(100%); -ms-filter: grayscale(100%); -o-filter: grayscale(100%); }
H5页面置灰
sunshu123456的博客
04-17 1787
H5页面置灰 H5页面置灰 一些特殊时间需要把开发的H5页面置灰，比如钱一段时间疫情哀悼一样；在此记录实现方法。 创建hui.css文件 文件内容如下 html,img { -webkit-filter: grayscale(1);/* Webkit */ filter:gray;/* IE6-9 */ filter: grayscale(1);/* W3C *...
html实现点击鼠标改变背景颜色
weixin_43787155的博客
09-27 5629
<!DOCTYPE> <html> <head> <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> <script> function changeBg(){ var bgColor=""; for(var i=0;i<6;i++){ bgColor...
h5页面置灰处理源代码，兼容IE（优雅降级提供下载浏览器链接）
01-08
h5页面置灰处理源代码 兼容IE（优雅降级提供下载浏览器链接） 马上要到清明节了，有朋友找我要给页面置灰的方案和方法，在网上搜的方法基本都是在Chrome上直接置灰，在ie上就有点难处理了；我找了下之前在南京遇到公祭日时候，做过类似的操作，为了方便当时用原生js写了一个，这样的好处是不依赖jq之类的，需要时候引入不需要时候废弃就行。 对与IE的兼容，我们做的是优雅降级，在IE的时候提示让用户去下载chrome浏览器或者360极速版（也是chrome的内核），然后下边就直接放代码啦。 /** 公祭日应用js ============== Start */ ;(function(){ sacr
浅谈h5自定义audio(问题及解决)
09-27
在H5页面中，自定义音频播放体验是一个常见的需求，特别是在制作互动性强的网页或游戏中。本文主要讨论了如何在H5中自定义`audio`元素，并解决在不同设备上出现的问题。 首先，HTML5的`<audio>`标签是用于嵌入音频...
小程序以及H5页面上IphoneX底部安全区域小黑条适配问题
03-29
背景 公司项目开发中，发现iPhoneX上吸底元素存在被小黑条遮挡的问题 原因 在苹果 iPhoneX 、iPhone XR等机型上，物理Home键被取消，改为底部小黑条替代home键功能,从而导致吸底元素会被小黑条遮挡覆盖的问题 解决...
vue实现移动端H5数字键盘组件使用详解
10-14
此外，为了提升用户体验，我们还需要为当前被点击的数字键添加视觉反馈，比如改变背景色。 以下是一个简单的Vue组件结构，展示了如何创建这样的数字键盘： ```html ()"/> <!-- 数字键盘的HTML结构 --> ...
H5单页如何制作发布.doc
10-12
6. **主题设置**：一键更改整体风格，包括背景色、字体和布局等。 7. **发布项目**：完成编辑后，发布H5单页，可通过二维码或分享链接进行传播。 **总结** H5单页的制作和发布是一个结合创意和技术的过程，它能够...
信贷H5产品需求文档.docx
05-07
【信贷H5产品需求文档】主要讨论了一个针对互联网信贷服务的H5页面设计，目标是创建一个简洁易用的贷款申请平台。以下是该文档中涉及的关键知识点： 1. **产品背景**：随着互联网金融的发展，通过移动设备进行在线...
H5把页面变灰的方法
du_5pet的博客
05-11 944
4月4日全国哀悼，在缅怀烈士英雄的同时，很多娱乐活动也都停止了。与此同时，诸多网站也把主题色改成灰色，css样式这么多，要是一个一个的改，会非常麻烦，现在有一个好办法可以一键变色而且写起来超级简单。 html { filter: progid:DXImageTransform.Microsoft.BasicImage(grayscale=1); -webkit-filter: grayscale(100%); } 就是这么两行了，不用的时候注释即可。 哪有什么岁月静好，只是有人.
网站置灰
weixin_50535566的博客
03-05 441
网站置灰前端如何实现 html { -webkit-filter: grayscale(.95 ); //grayscale(%) //将图像转换为灰度图像。值定义转换的比例。值为100%则完全转为灰度图像，值为0%图像无变化。值在0%到100%之间，则是效果的线性乘子。若未设置，值默认是0； ...
webview 去掉滚动条和上下黑灰色背景
ZHUTAN_123的博客
06-23 872
// 去掉webView的滚动条 for (UIView *subView in [webView subviews]) { if ([subView isKindOfClass:[UIScrollView class]]) { // 不显示竖直的滚动条 [(UIScrollView *)subView
H5移动端底部input唤醒软键盘遮挡输入框（坑）
qq_42704649的博客
07-08 692
<input type="text" value="" class="tinput"/> //针对直接在浏览器打开此方法有效 $('.tinput').bind('focus', function() { // 软键盘弹起之后再调整滚动条位置 if ($(this).offset().top > document.body.scrollHeight / 2) { setTimeout(function .
移动端iOS网页收起键盘底部有空白、软键盘弹起遮挡输入框等问题
weixin_40030173的博客
10-28 1330
1、移动端iOS网页收起键盘底部有空白: 失焦的时候把窗口滚动位置设置到（0,0）就行了 <input type="text" οnblur="window.scrollTo(0, 0);"> 2、iOS html5 移动端 软键盘弹起遮挡输入框: 2.1、Element.scrollIntoViewIfNeeded() 方法用来将不在浏览器窗口的可见区域内的元素滚动到浏览器窗口的可...
如何实现HTML里面鼠标放上之后背景改变
weixin_52474888的博客
03-05 8264
如何使用html制作一个鼠标放上之后文字背景改变的效果，并且点击背景就可以进行网页的跳转 默认效果： 鼠标放上去之后的效果： 代码如下： <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <style type="text/css"> /* 首先使用通配符选择器对内外边距进行格式化 */ ..
css如何快速将网站设置为灰色背景
codingLeader的博客
12-01 1438
css如何快速将网站设置为灰色背景
CSS3去除移动端点击元素时产生的高亮背景色
Esther的博客
06-06 4884
做了一段时间的移动端项目了，碰到了一个顽固的BUG: 即点击一个icon元素的时候，发现底部会有一块蓝色的高亮。 最终，只用了一小段的css代码就解决了： -webkit-tap-highlight-color: transparent; 这个属性是用于设定元素在移动设备（如Adnroid、iOS）上被触发点击事件时，响应的背景框的颜色。 想要禁用这个高亮，设置颜色的alpha值为0即可...
h5 去掉input 默认系统默灰色背景
huch的博客
05-24 5888
产品在测试时发现，在点击页面中输入框的时候，总是会先出现一个灰色背景后面又没了，告诉我后我第一感觉这是浏览器默认加上了高亮颜色/背景色。 但是默认的点击背景色很突兀，想禁用的话，可以添加如下css样式： tap-highlight-color:rgba(0,0,0,0); -webkit-tap-highlight-color:rgba(0,0,0,0);...
帮我写一个h5页面，包含固定在页面中心的div
最新发布
09-10
### 回答1： 以下是一个简单的HTML5页面代码，其中包含一个固定在页面中心的div: ```html <!DOCTYPE html> <html> <head> <style> .center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } </style> </head> <body> <div class="center"> <p>这是一个固定在页面中心的div</p> </div> </body> </html> ``` 在这里，我们使用了绝对定位来将div固定在页面中心，并使用CSS3的transform属性将其向上和向左偏移50%。 ### 回答2： 当然可以帮你写一个H5页面，包含固定在页面中心的div。以下是一个简单的实现方式： 首先，我们需要创建一个HTML文件，并在头部添加一个H5文档类型的声明(`<!DOCTYPE html>`)。然后，我们在页面中添加一个容器div作为页面的主要内容。 接下来，为了让div固定在页面的中心，我们需要使用CSS样式来对它进行定位。我们可以使用`position: fixed`属性将div固定在页面上，然后使用`top: 50%`和`left: 50%`将其移动到页面的中心。最后，我们使用`transform: translate(-50%, -50%)`将div的中心点与页面中心对齐。 HTML代码示例： ``` <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>H5页面</title> <style> body { margin: 0; padding: 0; } .center-div { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background-color: #f5f5f5; width: 300px; height: 300px; border: 1px solid #ccc; } </style> </head> <body> <div class="center-div"></div> </body> </html> ``` 在这个示例中，我们创建了一个CSS类名为`center-div`的div，并将其样式设为固定在页面中心。该div的背景颜色为#f5f5f5，宽度和高度为300px，边框为1px的灰色。 使用这个示例代码，你可以自由地修改div的宽度、高度、背景颜色和边框样式，以满足你的页面设计需求。 ### 回答3： 当然可以帮您写一个包含固定在页面中心的H5页面。 首先，创建一个HTML文件，并添加必要的DOCTYPE声明和HTML标签。然后，在<body>标签中添加一个<div>元素作为整个页面的容器。接下来，使用CSS样式设置这个<div>元素在页面中居中显示。以下是一个示例代码： ```html <!DOCTYPE html> <html> <head> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; margin: 0; } .center-div { width: 300px; height: 200px; background-color: #ccc; text-align: center; line-height: 200px; } </style> </head> <body> <div class="center-div"> 这是固定在页面中心的DIV </div> </body> </html> ``` 在上述示例代码中，通过CSS样式中的`display: flex;`和`justify-content: center; align-items: center;`设置了<body>标签的内容居中显示。而`.center-div`类设置了<div>元素的宽度、高度、背景颜色以及文本在垂直居中的样式。 保存并运行上述代码，您将看到一个固定在页面中心的DIV。您可以根据需要调整样式以及DIV的尺寸和内容。希望对您有所帮助！

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值