ホームページ > ウェブフロントエンド > htmlチュートリアル > CSS背景透過効果の実装_html/css_WEB-ITnose

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

WBOY
リリース: 2016-06-24 11:48:52
オリジナル
1059 人が閲覧しました

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


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


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

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 画像付き。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート