HTML透明文本输入框

Question

HTML透明文本输入框

7

I have the following code example:

<style>
{ margin: 0; padding: 0; }
html, body {
 margin: 0;
 height: 100%;
 width: 100%;
    overflow:hidden;
 background-size: 100% 100%;
    background-repeat: no-repeat;
}
.input {
 margin: 0;
 padding-top:0px;
 padding-bottom:0px;
 padding-left:0px;
 padding-right:0px;
 opacity: 0.6;
 filter: alpha(opacity=60); /* For IE8 and earlier */
 background-color:#000;
  border:none;
  outline:none;
}
#input {
  opacity: 0.6;
 filter: alpha(opacity=60); /* For IE8 and earlier */
  border:none;
  outline:none;
  }
.bgDiv {
 margin: 0;
 padding-top:0px;
 padding-bottom:0px;
 padding-left:0px;
 padding-right:0px;
 z-index:1;
}
.mainDiv {
 margin: 0;
 padding-top:0px;
 padding-bottom:0px;
 padding-left:0px;
 padding-right:0px;
 z-index:3;
}
</style>

<div id="bgDiv" name="bgDiv" class="bgDiv">
<img src="http://wallpapercave.com/wp/2u5OrmL.png" style="background-image: url('http://wallpapercave.com/wp/2u5OrmL.png'); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
</div>
<div id="mainDiv" name="mainDiv" class="mainDiv">
<form id="iform" name="iform" action="index.php" method="post">
<input type="text" maxleth="18" align="center" id="input" name="input" class="input" placeholder="placeholder" style="border:0;outline:none;width:100%;height:100%;font-size:98px;text-align: center;" autocomplete="off" autofocus>
</form>
</div>

我正在尝试使文本输入框具有透明背景，以便用户可以看到页面下方的背景图片。同时，仍然能够看到在框中键入的文本。

input[type=text] {
background: transparent;
border: none;

背景颜色：rgba(0,0,0,0);

上述方法均无效，没有任何效果。请帮忙解决。

- MBF

5个回答

2

尝试：

  margin: 30px;
  background-color: #ffffff;
  border: 1px solid black;
  opacity: 0.6;
  filter: alpha(opacity=60); /* For IE8 and earlier */

这是一个展示例子的代码片段，可以通过此处查看。

- rassar

不过，如果你尝试使用文本输入，它对我来说并不起作用。 - MBF

对我来说运行良好...已更新fiddle，请再试一次。 - rassar

将我的Fiddle更新为实际在页面上使用的代码，有点类似。 - MBF

1

我认为这是你想要的东西：

body,html{
  margin: 0;
  padding: 0
}
.wrapper{
  background: url('http://wallpapercave.com/wp/2u5OrmL.png');
  height: 100vh;
  text-align: center
}
input{
  background: transparent;
  color: #FFF;
  top: 40vh;
  position: relative;
  border: 1px solid #FFF;
  display: inline-block;
}

<div class="wrapper">
  <form id="iform" name="iform" action="index.php" method="post">
<input type="text" maxleth="18" align="center" id="input" name="input" class="input" placeholder="placeholder" style="width:90%;font-size:98px;text-align: center;" autocomplete="off" autofocus>
</form>
</div>

- Majid Nayyeri

0

如果以上任何代码对您无效，则尝试这个。

<input type="text" name="name" style="background-color:transparent;" />

这对我有用。

- Viveka S

0

在我正在开发的一个网站中，我成功地使用了透明文本来使一个按钮的位置比原本预期的更低。

<div style="display:inline-block;user-select: none;opacity: 0;border:0.1px solid ;border-radius:1px;padding:1px;background:linear-gradient(to bottom,,)">Transparent Text</div>

这个 div 样式没有用户选择和不透明度。在我的网站上查看时，完全是按照预期的完全不可见。

希望这能以某种方式帮助您！我知道我有点晚了。

- HybridWarriorX

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- hubman · Accepted Answer

尝试使用

            background-color: transparent;

     input {
        background-color: transparent;

    }
    .WRAPPER {
        background-color: #000;
        height: 575px;
        width: 975px;
        background-image: url("http://wallpapercave.com/wp/2u5OrmL.png");
        top: auto;
        margin: -8px;
    }
    body {
        
        background-color: #000;
        background-image: url("http://wallpapercave.com/wp/2u5OrmL.png");
    }
    #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;
    }

<div id="bgDiv" name="bgDiv" class="bgDiv">
<img src="http://wallpapercave.com/wp/2u5OrmL.png" style="background-image: url('http://wallpapercave.com/wp/2u5OrmL.png'); -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
</div>
<div id="mainDiv" name="mainDiv" class="mainDiv">
<form id="iform" name="iform" action="index.php" method="post">
<input type="text" maxleth="18" align="center" id="input" name="input" class="input" placeholder="placeholder" style="border:0;outline:none;width:100%;height:100%;font-size:98px;text-align: center;" autocomplete="off" autofocus>
</form>
</div>