Example 2: Transparent Input Field on a Background Image
In this example, we place a transparent input field on a transparent div that overlays a background image.
HTML
<!DOCTYPE html> < html > < head > < title >Transparent Input Field on Background Image</ title > < style > .background-image { background-image: url( 'https://media.w3wiki.org/wp-content/cdn-uploads/20190710102234/download3.png'); background-size: cover; position: relative; height: 100vh; } .transparent-div { background: transparent; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); padding: 20px; } .transparent-input { background: transparent; border: none; outline: none; color: #fff; border: 1px solid #fff; width: 250px; height: 50px; font-size: 24px; } </ style > </ head > < body > < div class = "background-image" > < div class = "transparent-div" > < input type = "text" class = "transparent-input" placeholder = "Enter text here..." > </ div > </ div > </ body > </ html > |
Output: In this code, the .background-image class sets a background image for the div. The .transparent-div class is positioned absolutely to center it over the background image and has a semi-transparent black background. The .transparent-input class ensures that the input field is transparent and has white text color for better visibility against the dark background.