父 div 背景的透明度

发布于 2024-11-18 16:07:43 字数 625 浏览 4 评论 0原文

我想知道是否有可能影响父 div 的背景颜色或不透明度。

我有一个带有这种透明白色的 div:

background-color:rgba(255,255,255,0.9);

div 包含带有圆角的文本字段,文本字段的背景颜色是否可以以某种方式为负透明度数,以便 div 和文本字段的总不透明度等于 0.5?

它就像是在已经透明的 div 的圆形记录中增加透明度。

我想出了 3 种可能的解决方案:

  1. 使父 dic 完全透明,并将 div 绘制为字段周围的框架。 (听起来很复杂。)
  2. 再次在文本字段内的 div 下方添加内容。 (表演?)
  3. 某种交集。

你认为我应该做什么?

-- 编辑 ---

我使用了解决方案 #2 的变体,我创建了一个 png 文件。这是(未调整的)结果(单击联系我们打开模态 div)。由于模糊,很难看清,但窗户也是透明的。

注意这远不是最好的解决方案,因为当我更新其下面的内容时,必须更新 png。

I wonder if it's possible to affect the bg color or opacity of the parent div.

I have a div with this transparent white color:

background-color:rgba(255,255,255,0.9);

The div contains textfields with rounded corners, can the textfields background color in some way be a negative transparency-number so the total opacity of the div and textfield equals 0.5?

Its like mmore transparency in a rounded rec of a already transparent div.

I have come up with 3 possible solutions:

  1. Make parent dic completely transparent and draw divs as a frame around the fields. (Sounds very complicated.)
  2. Add the content below the div again, inside the textfield. (Performance?)
  3. Some kind of intersection.

What do you think I should do?

-- Edit ---

I used a variation of solution #2, I created a png file. Here is the (untweaked)result (Click contact us to open the modal div). It's hard to see, because of the blur but the window is transparent too.

Note this is far from the best solution since one have to update the png when I update the content below it.

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

风轻花落早 2024-11-25 16:07:43

如果我理解正确的话,您想在父 div 中打开一个窗口/孔。据我所知,你不能这样做,因为 div 位于文本框后面,并且你对它们应用的任何透明度都会导致 div 显示槽框,而不是 div 后面的内容。

也许,您可以将 div 背景设置为带有两个与文本框一致的透明孔的 PNG 图像,而不是背景颜色,但这是像您这样的解决方法......

If I understand correctly, you want to open a window/hole in the parent div. As far as I know, you can't do that, because the div is behind the text boxes, and any transparency you apply tho them will cause the div to show trough the boxes, NOT the content behind the div.

Maybe, instead of a background color, you can make the div background a PNG image with two transparent holes that coincide with text boxes, but this is a workaround like yours...

怎会甘心 2024-11-25 16:07:43

据我所知,应用于外部 div 的透明度将应用于其内部的所有内容。我不知道你到底想在这里实现什么,也许你应该在 jsfiddle 上发布更多代码或模型。

这是我在该主题上可以找到的内容: http:// css-tricks.com/384-non-transparent-elements-inside-transparent-elements/

编辑:对于您的问题,我会尝试(我不确定它是否会起作用)遵循类似的解决方案链接我之前发布过。将两个独立的 div 放置在另一个之上。我建议您在上层使用带有透明输入的表单,也许这可以为您做点什么?我不知道还能告诉你什么,png 解决方案不是最好的,但你可能需要到处使用 png。

可能是这样的: http://jsfiddle.net/XnATc/21/

As far as I know, the transparency applied to the outer div will apply to everything inside it. I don't know exactly what you want to achieve here, maybe you should post some more code or a mockup on jsfiddle.

This is what I could find on the subject: http://css-tricks.com/384-non-transparent-elements-inside-transparent-elements/

EDIT: For your problem what I would try (I'm not sure if it will work) is follow a similar solution to the link I posted before. Have two separated divs positioned one above the other. I'd recomend you have the form with your transparent inputs on the uper layer, maybe that can do something for you? I don't know what else to tell you, the png solution isn't the best, but you might need to use png's here and there.

Something like this maybe: http://jsfiddle.net/XnATc/21/

⒈起吃苦の倖褔 2024-11-25 16:07:43

Johannes Lund

是的,您应该使用 png 图像文件,否则十六进制颜色编码及其数学将变得非常复杂。

Johannes Lund

Yes you should use png image files for this else things gonna be very complicated with hex color coding and its mathematics.

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文