HTML pole wejściowe przejrzysty tekst

Question

Mam następujący przykład kodu:

<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>

ja próbuje zrobić wejście tekst ma przezroczyste tło, dzięki czemu użytkownik może zobaczyć pod spodem obraz tła strony. W tym samym czasie nadal można zobaczyć tekst wpisany w polu.

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

} kolor tła: rgba (0,0,0,0);

żaden z nich nie działa lub nie działa. Proszę pomóż.

Answer 1

spróbuj

  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

Spróbuj:

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

Oto fiddle który daje przykład.

Answer 3

myślę, że to jest rzecz, którą chcesz:

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>