Implementation of CSS background transparency effect_html/css_WEB-ITnose

The description of this effect is not clear, so just go to the picture. Without a picture, there is no truth.


How to achieve the form effect in the picture?

Reply to discussion (solution)

input{opacity: 0.8;}

input{opacity: 0.8;}

I added

opacity:value

attributes to input and textarea. But it cannot be achieved that the form content is transparent while other parts are opaque.
There are three layers to consider here:
1. The transparent background image
2. The blue background
3. The transparent effect of the form input box

It’s a bit confusing now. What is important is how to place these three layers. . .

<div class="d1">  <div class="d2">  <form>  <input/>  </form>  </div></div><style>  .d1{background:url(http://static.csdn.net/public/common/toolbar/images/f_icon.png)}.d2{opacity: 0.8;background:#00f;width:100%;height:200px;text-align:center;opacity:0.7;}  input{background:rgba(255,255,255,200);}</style>

Use PNG image.