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

你可以通过悬停时不太透明的图像更改背景来实现这一点，并使用较少的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

嗯，我已经攻击了它，所以如果你想要的话，你可以这样做。

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

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

3 个答案: