Html поле ввода прозрачного текста

У меня есть следующий код:Html поле ввода прозрачного текста

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

Ни один из них не работает или не имеет никакого эффекта. Пожалуйста помоги.

источник

2017-01-01 MBF

попробовать с

  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>

источник

2017-01-01 21:17:41 hubman

Обновлен мой курс, чтобы мой фактический код использовался на странице, вроде. Я должен делать что-то неправильно ... Кроме того, я знаю, что некоторые из них, такие как .input и #input в css избыточны, я просто оставил его, чтобы показать, что я пробовал в обоих направлениях. – MBF

Фоновое изображение должно быть от тега , а не от фактического фона. (Для использования с картами позже). Кроме того, это делает текст поля ввода прозрачным. – MBF

Я работаю с этим, я думаю, что он может работать сейчас! Спасибо! – MBF

Try:

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

Вот fiddle, который дает пример.

источник

2017-01-01 21:08:40 rassar

Попробуйте это с текстовым вводом, но он не работает для меня. – MBF

Прекрасно работает для меня ... обновил скрипку, попробуйте еще раз. – rassar

Обновлен мой курс, чтобы мой фактический код использовался на странице, вроде. – MBF

Я думаю, что это вещь, которую вы хотите:

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>

источник

2017-01-01 22:34:15 JustCauseWhat

Html поле ввода прозрачного текста

ответ

Смежные вопросы