0

I have a special problem with my transparency effect. Since I have a background image on the body background I want it to display with opacity through every white area. The problem is that it does not work if my element (in this case a input field) has a parent with a background color. Since I do not know how to google this problem I hope someone here can give me a hand.

So I will give you a simple example page to show you my problem:

<body style="background: url(./images/background.png) no-repeat center top fixed; background-color: #FFFFFF; -webkit-background-size: cover; -moz-background-size: cover; -o-background-size: cover; background-size: cover;">
<div style="height:300px;  opacity: 0.95;">
    <input type="text" value="test" style="height:200px; width: 100%">
</div>
<div style="background-color:yellow; height:300px;">
    <input type="text" value="test" style="height:200px; width: 100%; opacity: 0.95;">
</div>

And here is the screenshot of the page http://haraldegger.com/show.png

Thank you for your help in advance and have a nice day.

Harald Egger
  • 1
  • 1
  • 1
    It's because you need transparency on the DIV that has background-color: yellow; – Michael Jul 26 '13 at 14:57
  • Thank you for your help. I know that when I set the div transparent it will work, but the problem is that I want to have the transparency only within the input field, but not on the outer div. – Harald Egger Jul 26 '13 at 15:01
  • `background-color:transparent` rather than opacity (otherwise your text will also be transparent) – Pete Jul 26 '13 at 15:08
  • Also that does not solve my problem, because the background of the parent div is looped, so the input field becomes yellow – Harald Egger Jul 26 '13 at 15:13
  • look at the popular http://stackoverflow.com/questions/806000/transparent-background-but-not-the-content-text-images-inside-it-in-css-on – Adriano Feb 27 '14 at 08:39

1 Answers1

0

I don't recommend using inline styles, but an example of making the input field transparent: 

<input type="text" style="background:transparent">

The CSS for opacity in other elements, across all browsers, is:

-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=50)";
filter: alpha(opacity=50);
-moz-opacity: 0.5;
-khtml-opacity: 0.5;
opacity: 0.5;
Matthew Johnson
  • 4,875
  • 2
  • 38
  • 51
  • First of all: thank you for your help. The code snippet I posted was as short as possible. Of course I use also the other definitions of opacity for older browsers. The problem with your proposed solution for my problem is that background:transparent makes the input field yellow, caused by the parent background color. What I try to reach is to skip the style of the parent element. – Harald Egger Jul 26 '13 at 15:12