div设置透明度后里面的内容也被透明化的解决方法

最新推荐文章于 2024-06-14 10:01:58 发布
最新推荐文章于 2024-06-14 10:01:58 发布
阅读量5.6k 收藏 4
点赞数 2
分类专栏： js+html 文章标签： html javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Young_Gao/article/details/78488318
版权

div 设置了透明度以后，返现里面的 图片 也被盖了一层 透明度

只需要在设置 div 颜色的透明度的时候改用 rgba 形式就可以了

可以先找到 16 进制颜色对应的 rgb 值 如：125,125,125

然后通过   rgba(125,125,125,0.2)  来处理透明度的问题

Young_Gao
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ie6 png 透明度 解决方法
06-20
2. 在JavaScript中调用该库初始化函数，如`DD_belatedPNG.fix('img, div')`，指定需要修复透明度的元素类型。 ```html <script src="DD_belatedPNG.js"></script> window.onload = function() { DD_belatedPNG....
HTML弹出透明层事例大小可以设置也可以比例化
09-28
- 弹出层由两个主要部分组成：`<div id="light">` 和 `<div id="light2">`，分别代表两个不同的弹出内容。它们都具有类名 `white_content`，确保了相同的样式应用。 - 弹出层内部包含一个关闭按钮，其`<a>`标签...
解决div设置opacity后，其中的内容也随之透明化
qq_44731369的博客
08-25 3598
今天做练习，本来想实现这个效果： 没想到，它居然变成了这样： 嗯？本想用opacity来控制div背景色透明度，可这文字也变透明了，并不是我想要的效果，这是被同化了？ 其实，解决方法并不难，只需一行代码就搞定了： background: rgba(255, 255, 255, 0.2);（最后的值为关键） <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <m
HBuilderX安装教程（非常详细）从零基础入门到精通，看完这一篇就够了
最新发布
2401_84618514的博客
06-14 479
网络安全产业就像一个江湖，各色人等聚集。相对于欧美国家基础扎实（懂加密、会防护、能挖洞、擅工程）的众多名门正派，我国的人才更多的属于旁门左道（很多白帽子可能会不服气），因此在未来的人才培养和建设上，需要调整结构，鼓励更多的人去做“正向”的、结合“业务”与“数据”、“自动化”的“体系、建设”，才能解人才之渴，真正的为社会全面互联网化提供安全保障。
03 div设置opacity透明度之后，发现里面的内容也随之生效的解决方法
X北辰北的博客
12-19 2579
问题描述 今天在项目中想实现如下一个样式： 然后就给底层这个div设置了背景色和opacity属性来控制透明度，但是发现里面的文字也有了透明度，就变得很难看。我们最终想要的效果可是仅仅这个底层的div有透明效果，里面的文字是没有这效果的，那接下来我们就看看该怎么做。 解决方法 嘿嘿，其实很简单，我们设置背景色的时候只需要用rgba的方式去设置就好了，如下所示...
div背景透明，div内部的内容不透明
qq_35086941的博客
04-07 686
1.css <style type="text/css"> #div1 { height:330px; background-color:rgba(0, 0, 0, 0.3); } </style> 2.html <body style="background-image: url('/img/1.jpg');"> <div id="div1"...
设置背景透明时里面内容内容模糊（已解决）
feizhong_web的博客
05-01 2765
我们通常会遇到这种问题，特别是对于我这种前端小白，在导航栏鼠标放上去的时候，设置背景透明，结果里面的文字也变暗了，这是因为子元素的文字继承了父元素的属性了，那怎么办，用伪类设同级元素就好。先贴代码，我的html&lt;div class="head"&gt; &lt;div class="width-keep"&gt; &lt;div class="logo"&gt;&lt
ajax分页查询+Div透明遮盖
05-11
在网页开发中，"Ajax分页查询+Div透明遮盖"是两个常见的技术点，用于提升用户体验和页面交互性。让我们分别深入探讨这两个概念。 **Ajax分页查询** Ajax（Asynchronous JavaScript and XML）是一种在无需刷新整个...
div style属性中设置其border无效是什么情况如何解决
12-13
检查是否有透明度设置，如`opacity`或`rgba`颜色。 解决方法： 1. 检查并修正CSS语法错误。 2. 提高内联样式的优先级，或者使用更具体的选择器来设置边框。 3. 对于老版本浏览器，可以使用浏览器前缀，如 `-webkit...
CSS实现背景图片透明而文字不透明效果的两种方法
12-13
这种方法通过使用 `rgba()` 函数设置背景颜色的透明度来实现。我们为背景图片创建一个父级容器，然后为包含文本的子级容器设置一个带有半透明白色的背景。这样，文字将保持完全不透明，而背景会呈现出透明度。例如...
js改变透明度实现轮播图的算法
11-25
所有图片的初始透明度都被设置为0，而第一张图片的透明度为1，使其可见。 接下来是JavaScript部分，主要负责处理轮播图的逻辑。我们首先获取页面中的图片元素、指示点、左右按钮，然后定义一个`showImage`函数，这...
CSS实现背景透明文字不透明的可行方法(兼容各浏览器)
12-13
例如，`rgba(255, 255, 255, 0.6)`表示一种60%透明度的白色背景。 然而，对于老版本的Internet Explorer（IE6、IE7、IE8），它们并不支持`rgba`，所以我们需要使用IE的专属滤镜`filter:Alpha`来模拟透明效果。问题...
设置头像及透明背景
11-08
当用户选择图片后，可以读取其内容并将其显示在canvas元素上，然后使用canvas的toDataURL方法生成圆形头像的Base64编码，用作预览。 ```javascript function handleFileSelect(event) { const file = event.target...
通过css3动画和opacity透明度实现呼吸灯效果
12-10
在网页设计中，为了创建吸引用户的交互体验，各种动态效果被广泛应用，其中之一就是呼吸灯效果。这个效果模拟了现实生活中电子设备的呼吸灯，通过明暗变化给人一种有节奏的闪烁感。本文将深入探讨如何利用CSS3的动画...
我个人认为很好的用div来做的透明弹出的效果。
11-18
首先，我们要理解如何设置 `div` 的透明度。在 CSS3 中，我们可以使用 `opacity` 属性来调整元素的不透明度。`opacity` 的取值范围是 0（完全透明）到 1（完全不透明）。例如，设置一个 `div` 全部为半透明，可以写...
父元素设置透明度，子元素也有透明度的解决办法
dwfyzf的博客
12-28 1162
今天遇到了设置透明度的问题，父元素设置透明度，子元素也自动生成了透明度，特别烦人，网上给出了很多解决兼容性的问题，如下这段代码，可以解决所有浏览器的兼容性 DOCTYPE html> html> head> meta charset="utf-8"> title>背景透明，文字不透明title> style> *{ padding: 0; margin: 0; } body
css实现遮罩层，父div透明，子div不透明
qq_36935391的博客
12-23 8348
博客园 首页 新随笔 联系 管理 订阅 随笔- 1021  文章- 1  评论- 24  css实现遮罩层，父div透明，子div不透明 使用元素的opacity 属性，设置遮罩层的效果， 主要 样式是：background-color: #ooo; opacity:0.3; 1 2 3 4 &lt;div style="wid...
div填充透明背景但是内容不透明
耐耐猪的博客
01-18 2967
让div有透明度而不影响内容，不能使用opacity:0.5，因为它会让内容也透明化；不影响内容要使用background:rgba()，rgba分别代表的是红色、绿色、蓝色和透明度（括号内的值分别对应），例如background:rgba(255,00,255,0.5)。 ...
使用jQuery技术设置课程表背景图，背景图片自选，要求背景图透明化处理；
05-10
可以使用以下代码来设置课程表的背景图，并将背景图透明化处理： HTML 代码： ```html <div id="course-table"></div> ``` CSS 代码： ```css #course-table { position: relative; width: 600px; height: ...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值