使文本輸入框透明？應該簡單嗎？

我試圖讓我的表單輸入透明，並把它放在我的div上面。基本上我希望文本字段對其背後的任何內容都是透明的。有什麼建議麼？使文本輸入框透明？應該簡單嗎？

<head> 

<style type="text/css"> 
    .WRAPPER { 
    background-color: #000; 
    height: 575px; 
    width: 975px; 
    background-image: url(exit-gate/exit-gate-bg.png); 
    top: auto; 
    margin: -8px; 
    } 

    body { 
    background-color: #000; 
    } 
</style> 

<style type="text/css"> 
    term { 
    background: transparent; 
    border: none; 
    } 
</style> 

</head> 



<body> 
    <div id="WRAPPER"> 
    <div class="term"><input name="email" type="text" id="email"> 
     <form name="form1" method="post" action="insert_ac.php"> 
     <input type="image" src="exit-gate/white-box-10.png" alt="{alternate text}" name="submit" value="submit"> 
     </form> 
    </div> 
    </div> 
</body> 
</html> 
</div>

來源

2013-12-13 HoustonGuy

你的「term」css聲明需要是「.term」纔有工作的希望。你的DOM結構也混亂了，你在關閉HTML標籤後肯定不應該有一個「div」。 – DrCord

@DrCord - 感謝您指出。我是新手......所以，當我開始時，事情往往會變得混亂，但我會把它清理乾淨。謝謝 – HoustonGuy

嘗試：

#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; 
}

DEMO here.

來源

2013-12-13 18:38:58 Hiral

我會用'rgba'的'transparent'值。由於舊版瀏覽器將默認爲純色。在這種情況下，黑色。 – Smeegs

@手稿，謝謝你的工作！還有一個問題......你會如何建議我在訪問者輸入時指定文本的字體，大小和顏色，以及指定文本框的大小？謝謝！ – HoustonGuy

@ user3089680我已編輯答案。 [你的意思是這樣嗎？]（http://jsfiddle.net/pWnhN/2/） – Hiral

這看起來方式太簡單了，但它爲我工作：

<input type="text" id="SI"/>

這是我輸入字段，我給它一個ID （SI），然後在我的CSS：

#SI{ 
    background-color:transparent; 
}

將透明度添加到具有SI id的元素;背景變得可見。

來源

2017-10-21 09:49:15

使文本輸入框透明？應該簡單嗎？

回答

相關問題