其他 div 外部的 div 不透明度
我正在寻找不透明的解决方案。 我有一个div(父级),里面有另一个div(子级)。 父 div 具有背景图像,并将不透明度设置为 0.5。 子 div 比父 div 小,在他的内部可以看到不透明度为 1.0 的背景图像。 有可能吗?
I looking-for solution with opacity.
I have div (parent) with another div inside (child).
Parent div has background image with set opacity to 0.5.
Child div is smaller than parent and in his inside see background image with opacity 1.0.
It is possible?
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(3)
这是不可能的。
如果父 div 设置了不透明度,则所有子 div 都会继承该不透明度。
It is not possible.
If parent div has opacity set, all sub div inherit that opacity.
您可以将透明度放入背景图像(例如透明的 PNG)中,或者使用 RGBA 颜色将平面颜色放入父 div 的背景中 - 这只会影响背景,而不会创建任何文本或子元素透明的。
您应该注意,不同浏览器并不 100% 支持 PNG 图像和 RGBA 颜色。如果您使用这些技术,您可能需要为旧版浏览器制定解决方法。
You can put the transparency into a background image (a transparent PNG, for instance), or use an RGBA colour to put a flat colour in the background of the parent div - this will only affect the background, without making any text or child elements transparent.
You should be aware that both PNG images and RGBA colours aren't supported 100% across browsers. You may need to put workarounds in place for older browsers if you use these techniques.
如果您正在使用图像或父级中有其他内容需要应用不透明度,则不能将另一个 div 作为子级,而是将其放在 div 外部并绝对位于另一个 div 之上。
示例
If you are using images or have other content in the parent that you need to apply opacity to, you can not have the other div as a child, but instead have it outside the div and absolutely positioned above the other div.
example