更改背景的不透明度，而不是子元素

Question

Is it possible to change the opacity of the background image of the form but not the fields inside the form. CSS:

#myForm{
  background-image:url("images/Binary.jpg");      
  border:1px solid #080808;
  box-shadow:#444444 0 0 1px inset;
  margin:20px auto 20px 52%;
  padding:20px;
  width:484px;
  -moz-box-shadow:black 4px 5px 11px;
  -webkit-box-shadow:black 4px 5px 11px;
  box-shadow:black 4px 5px 11px;
}

So, this is my CSS and I want to reduce the opacity of the Binary.jpg only not the contents of the form. Is it possible??

Answer 1

Put simply: no. You would need to make the image a semi-transparent PNG.

Answer 2

you can do this by with less opacity image change background on hover with less opecativy gif or png image

or try something like might work

<div id="myForm">
    <form>...</form>
</div>  

css

div {
 -khtml-opacity:.50; 
 -moz-opacity:.50; 
 -ms-filter:"alpha(opacity=50)";
  filter:alpha(opacity=50);
  filter: progid:DXImageTransform.Microsoft.Alpha(opacity=0.5);
  opacity:.50; 
}

Answer 3

Well I've hacked it, so certainly you can do it like this if you want

Demo

HTML

<div class="wrapper">
    <div class="holder">This is awesome yea ;)</div>
</div>

CSS

.wrapper {  
    position: relative;
    color: #fff;
}

.wrapper:before {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    background-image: url('http://www.freegreatpicture.com/files/146/25234-colorful-high-resolution-background.jpg');
    opacity: 0.7;
}

.holder {
    z-index: 2;
    position: relative;
}