如何使输入元素完全透明？答案

【问题标题】：How to make input element completely transparent?如何使输入元素完全透明？
【发布时间】：2020-07-19 09:23:48
【问题描述】：

如何使输入元素完全透明，使其具有主体背景图像而不是其父元素的背景颜色？
HTML 代码：

body{
    background-image:url("https://upload.wikimedia.org/wikipedia/commons/3/35/Neckertal_20150527-6384.jpg");
}

#wrapper{
    background-color: white;
    height: 100px;
}

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>

    </head>
    <body>
        <div id="wrapper">
            <input type="text">
        </div>
    </body>
</html>

【问题讨论】：

标签： html css transparency

【解决方案1】：

添加css如下：

#wrapper > input {
     background-color: transparent;
     border: none;
}

如果您也想删除焦点边框，请添加：

#wrapper > input:focus {
     outline:none;
}

【讨论】：

【解决方案2】：

据我了解，您正试图阻止子元素继承父元素的背景颜色。

唯一的办法就是覆盖样式

我不知道这是否适合你，但你可以这样做：

input{
        background-image:url("image.jpg");
        border: none;
    }

您也可以将背景图像的任何部分替换为输入字段，只需剪切该部分图像并将其设置为输入字段的背景图像。

【讨论】：

【解决方案3】：

你可以这样做：

#wrapper{
    background-color: white;
    height: 100px;
}

#wrapper > input
{
    background-color: transparent;
    border: none;
}

<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Document</title>
    </head>
    <body>
        <div id="wrapper">
            <input type="text">
        </div>
    </body>
</html>

几年前发布了类似的答案：set input transparent

【讨论】：