Html hộp nhập văn bản trong suốt

Question

Tôi có ví dụ mã sau:

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

Tôi đang cố gắng để làm cho đầu vào văn bản có nền trong suốt, vì vậy người dùng có thể xem hình ảnh nền cơ bản của trang. Trong khi cùng lúc, vẫn có thể thấy văn bản được nhập trong hộp.

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

} màu nền: rgba (0,0,0,0);

không cách nào trong số đó dường như hoạt động hoặc có hiệu lực. Hãy giúp tôi.

Answer 1

thử với

  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

Hãy thử:

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

Dưới đây là một fiddle cung cấp cho một ví dụ.

Answer 3

Tôi nghĩ rằng đây là điều mà bạn muốn:

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>