CSS背景透過効果の実装_html/css_WEB-ITnose

この効果を明確に説明することはできません。写真を見てください。写真なしでは真実はありません。


写真のフォーム効果を実現するにはどうすればよいですか?

ディスカッションへの返信 (解決策)

input{opacity: 0.8;}

input{opacity: 0.8;}

input と textarea に

opacity:value

属性を追加しました。ただし、フォームのコンテンツが透明で、他の部分が不透明であるということは実現できません。
ここで考慮すべき 3 つのレイヤーがあります:
1. 透明な背景画像
2. 青色の背景
3. フォーム入力ボックスの透明効果

さらに混乱しているのは、これら 3 つのレイヤーを配置する方法です。 。 。

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

PNG 画像付き。