Transparent Text Area

Ferretloafer · 11-Jun-2007, 12:51 AM #1

I was wondering how to make a text area semi-transparent or be able to adjust the opacity levels so that the background image is visible.

Shadow2531 · 11-Jun-2007, 02:24 AM #2

The background image should show through the textarea automatically, but here's how you can mess with the opacity.

Code:

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>Transparent Textarea</title>
        <style>
            textarea {
                background-color: #fff;
                background-image: url(http://www.google.com/images/logo.gif);
                width: 276px;
                height: 110px;
                font-weight: bold;
                color: #ff9900;
                font-size: 1.4em;
                opacity: .50; /* Standard opacity property */
                filter: progid:DXImageTransform.Microsoft.Alpha(opacity=50); /* IE opacity property */
                /* reducing the opacity will also make the textarea text become transparent */
            }
        </style>
    </head>
    <body>
        <p><textarea>You should see the Google image behind this text.</textarea></p>
    </body>
</html>

dudeking · 11-Jun-2007, 06:01 PM #3

overflow:none;
border:0px;

Will neaten the edges up abit as well

Search
Search in:
Show Threads Show Posts
Advanced Search

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)