是否有可能有一个透明元素，看穿他的父母不透明的背景 [英] Is it possible to have a element transparent and see through his parent opaque background

问题描述

嗨我设计一个表格（HT​​ML / CSS / JS）当用户想订阅或登陆，弹出的过的内容。整个窗体背景是不透明的固体的颜色，但我想要的输入有一个透明的背景，所以我们可以通过它看到的形式背后的内容。我没有任何问题，设置输入透明的，但我有没有我怎样才能让他们的想法通过他们的父母背景色。我开始觉得这是不可能的，只有CSS。我可以分享code，但它更像是一个通用的问题。谢谢

Hi I'm designing a form (HTML / CSS / JS) that pop's over the content when the user wants to subscribe or to login. The whole form background is solid opaque color but I want the inputs to have a transparent background so we can see the content behind the form through it. I don't have any problem setting the inputs transparent but I have no idea of how I can make them "pass through" their parent background color. I begin to think that is impossible with only CSS. I can share code but it's more like a generic question. Thanks

推荐答案

一个完全不同的解决方案是使用＆LT; SVG＆GT; ，甚至巴纽（虽然这将是一个额外的http请求）。

A completely different solution would be to use an <svg>, or even a .png (though that would be an extra http request).

<div class='container is--transparent'>
    <svg>
        # I am the same size as the background and have transparent parts where required
        # Indeed, I could be a div, with a .png background, if you needed to support older browsers
    </svg>
    <input class='input-one' />
    <input class='input-two' />
</div>

然后使用CSS来设置：

Then use css to set:

1. 的位置是：绝对的; 的背景格内的所有内容


2. 的SVG是顶：0; 左：0; ，使其覆盖容器正好


3. 输入被定位在透明部分在SVG


4. 输入的背景是透明

1. position: absolute; on everything within the background div
2. the svg to be top: 0; left: 0; so it covers the container exactly
3. the inputs to be positioned over the transparent parts in the SVG
4. the backgrounds of the inputs to be transparent

这一切的输入方式下将是透明的，无论背景是，虽然将大放异彩。

This way everything under the inputs will be transparent and whatever the background is will shine though.

有关svgs的支持也同样出色，你必须回去IE8为了有一个问题。

Support for svgs is also excellent, you have to go back to IE8 for there to be a problem.

这篇关于是否有可能有一个透明元素，看穿他的父母不透明的背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！