ヒント フロントエンドの透明度と背景と要素のぼかし_html/css_WEB-ITnose

WBOY
リリース: 2016-06-24 11:44:36
オリジナル
1559 人が閲覧しました

私はこの状況に何度か遭遇しました:
少し芸術的な効果のある背景画像がぼやけており、独特のテキストの行が背景にはっきりと浮遊しています (一口、美しい想像力を追加すると、人生がより良くなります)

パート 1 私の最初の反応は、CSS に (ぼかし、不透明度) のような属性があることを知っているから、これは簡単だということでした。
せいぜいもう少し追加できそうです

これくらいで十分そうです。 (興味がある場合や、さらにリクエストがある場合は、影やトランジションなどの CSS フィルター効果を追加することもできます) つまり、とても満足して使用しています
しかし、すぐに問題を発見しました
上のテキスト。写真もぼやけています(なぜですか?)理由は難しくありません

1 -moz-opacity:0.5;2 filter:alpha(opacity=50); /* 针对 IE8 以及更早的版本 */3 -webkit-filter: blur(3px); /* Chrome, Opera */4 -moz-filter: blur(3px);5 -ms-filter: blur(3px);
ログイン後にコピー

それはその子要素であるため、最初にz-indexを使用して別のレイヤーに配置しようとしましたが、失敗しました。これはその子要素です。非常に重要なので 2 回言います>_<)
でも、すぐに解決しました
みんな z-index を使っているのですから、position を使えばいいだけではないでしょうか (w3c の設定は間違いなく厳密なので、保存しておきます)もっと一歩踏み出しました)
ということで、コードは単純にこんな感じ

<div style="background-image:url(xxx.jpg)">    <p>xxxxxxxxxxxx</p></div>
ログイン後にコピー

or like this

<div style="background-image:url(xxx.jpg)"></div><p>xxxxxxxxxxxx</p>
ログイン後にコピー

問題解決は位置決めにお任せください これが正しい考え方です。

私のコード スニペットのこの部分を投稿します:

<div>    <img src="xx.jpg">    <p>xxxxxxxxxxx</p></div>
ログイン後にコピー

 1 <div class="head_img"></div> 2 <div class="row"> 3   <div class="col-xs-2 goto_bottom" style="left:35%;"> 4     <p class="color_white1 font_15_bold" style="margin-bottom:0px;">关注</p> 5     <p class="color_white1 font_15 ">13</p> 6   </div> 7   <div class="col-xs-2 padding_no goto_bottom" style="left:60%;" > 8     <p class="color_white1 font_15_bold" style="margin-bottom:0px;">粉丝</p> 9     <p class="color_white1 font_15">3232</p>10    </div>11 </div> 
ログイン後にコピー

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート
私たちについて 免責事項 Sitemap
PHP中国語ウェブサイト:福祉オンライン PHP トレーニング,PHP 学習者の迅速な成長を支援します!