html – 是否可以使元素透明并查看其父级不透明背景

概述嗨,我正在设计一个表单( HTML / CSS / JS),当用户想要订阅或登录时,该表单会d出内容.整个表单背景是固体不透明的颜色,但我希望输入具有透明背景,以便我们可以通过它看到表单背后的内容.我没有任何问题设置输入透明,但我不知道如何让他们“通过”他们的父背景颜色.我开始认为只有CSS是不可能的.我可以共享代码,但它更像是一个通用的问题.谢谢 完全不同的解决方案是使用< svg>,甚至是.p 嗨,我正在设计一个表单( HTML / CSS / Js),当用户想要订阅或登录时,该表单会d出内容.整个表单背景是固体不透明的颜色,但我希望输入具有透明背景,以便我们可以通过它看到表单背后的内容.我没有任何问题设置输入透明,但我不知道如何让他们“通过”他们的父背景颜色.我开始认为只有CSS是不可能的.我可以共享代码,但它更像是一个通用的问题.谢谢解决方法 完全不同的解决方案是使用< svg>,甚至是.png(尽管这将是额外的http请求).

<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设置：

>位置：绝对;在背景div中的所有内容
> svg是top：0;左：0;所以它完全覆盖了容器
>将输入定位在SVG中的透明部分上
>输入的背景是透明的

这样,输入下的所有内容都将是透明的,无论背景如何都会闪耀.

对svgs的支持也很出色,你必须回到ie8才会出现问题.

总结

以上是内存溢出为你收集整理的html – 是否可以使元素透明并查看其父级不透明背景全部内容，希望文章能够帮你解决html – 是否可以使元素透明并查看其父级不透明背景所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。