एचटीएमएल पारदर्शी टेक्स्ट इनपुट बॉक्स

Question

मैं निम्नलिखित कोड उदाहरण है:

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

मैं बनाने के लिए पाठ इनपुट एक पारदर्शी पृष्ठभूमि है प्रयास कर रहा है, तो उपयोगकर्ता अंतर्निहित पृष्ठभूमि छवि देख सकते हैं पृष्ठ का जबकि एक ही समय में, अभी भी बॉक्स में टाइप किए गए पाठ को देखने में सक्षम हो।

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

} पृष्ठभूमि का रंग: RGBA (0,0,0,0);

उनमें से कोई भी काम करने या किसी भी प्रभाव का प्रतीत नहीं होता है। कृपया मदद करे।

Answer 1

  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

प्रयास करें:

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

यहाँ एक fiddle कि एक उदाहरण देता है।

Answer 3

साथ कोशिश मुझे लगता है कि इस बात यह है कि आप चाहते हैं:

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>