Question

我正在尝试让我的表单输入透明，并将其放在我的div之上。基本上我希望文本字段对其背后的任何内容都是透明的。有什么建议吗？

<head>

<style type="text/css">
  .WRAPPER {
    background-color: #000;
    height: 575px;
    width: 975px;
    background-image: url(exit-gate/exit-gate-bg.png);
    top: auto;
    margin: -8px;
  }

  body {
    background-color: #000;
  } 
</style>

<style type="text/css">
  term {
    background: transparent;
    border: none;
  }
</style>

</head>



<body>
  <div id="WRAPPER"> 
    <div class="term"><input name="email" type="text" id="email">
      <form name="form1" method="post" action="insert_ac.php">
        <input type="image" src="exit-gate/white-box-10.png" alt="{alternate text}" name="submit" value="submit">
      </form>
    </div>
  </div>
</body>
</html>
</div>

Answer 1

尝试：

#email {
    background-color:rgba(0, 0, 0, 0);
    color:white;
    border: none;
    outline:none;
    height:30px;
    transition:height 1s;
    -webkit-transition:height 1s;
}
#email:focus {
    height:50px;
    font-size:16px;
}

DEMO here.

Answer 2

这看起来太简单但对我有用：

 <input type="text" id="SI"/>

这是我的输入字段，我给它一个ID（SI），然后在我的CSS中：

#SI{
    background-color:transparent;
}

使用SI id为元素添加透明度;背景变得可见。

Answer 3

说我想要一个透明的颜色就像拥有父的颜色一样，所以将 background-color 的值设为 inherit。

对我来说这有帮助：

<input type="text" />

风格：

input {
    background-color:inherit;
    }

Answer 4

byte[] data = imageDetail.getByteData();
        String name = imageDetail.getName();        
        BufferedImage bImageFromConvert = ImageIO.read(new ByteArrayInputStream(data));
        ImageIO.write(bImageFromConvert, "jpg", new File(baseReportFolderLocation+"New_"+name+".jpg"));

java.lang.IllegalArgumentException: image == null!
at javax.imageio.ImageTypeSpecifier.createFromRenderedImage(ImageTypeSpecifier.java:925)
at javax.imageio.ImageIO.getWriter(ImageIO.java:1592)

Answer 5

同样值得注意的是，在macOS和iOS上，在任何浏览器中，“用户代理样式表”都将覆盖文本框样式。您可以通过添加！important来覆盖它（包括:: focus发光）。

#mybox {
    background-color: transparent!important;
    border-color: transparent!important;
    outline: transparent!important;
}

<input type="text" id="mybox" value="Textbox" />

使文本输入框透明？应该简单吗？

5 个答案: