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

Question

是否可以更改窗體背景圖像的不透明度，而不是窗體內的字段。 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;
}

所以，這是我的CSS，我想減少Binary.jpg的不透明度，而不是表單的內容。 可能嗎？？

Answer 1

簡單地說：不。 您需要將圖像設置為半透明PNG。

Answer 2

你可以通過較少的不透明圖像更改背景懸停與較少的oifativy gif或png圖像來做到這一點

或嘗試類似的工作

<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

好吧，我已經黑了它，所以如果你願意，你當然可以這樣做

演示

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