Html transparent Texteingabefeld

Question

Ich habe das folgende Codebeispiel:

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

Ich bin versucht, die Texteingabe hat einen transparenten Hintergrund zu machen, so dass der Benutzer die darunter liegende Hintergrundbild sehen der Seite. Während zur gleichen Zeit, immer noch in der Lage sein, Text in der Box eingegeben zu sehen.

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

} Hintergrund-Farbe: RGBA (0,0,0,0);

nichts davon scheint zu funktionieren oder irgendeine Wirkung zu haben. Bitte helfen Sie.

Answer 1

versuchen mit

  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>

Answer 2

Versuchen:

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

Hier ist ein fiddle, das ein Beispiel gibt.

Answer 3

Ich denke, das ist die Sache, die Sie wollen:

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>