9

背景画像の不透明度を 100% から 0% にしたいと考えています。画像エディターを使用して画像を不透明にする別の画像アセットを使用することもできますが、使用するアセットはできるだけ少なくしたいと考えています。これはCSSで行うことができますか？それぞれの不透明度を変更するいくつかの div を作成できることはわかっていますが、見栄えを良くするには多くの div が必要になります。

これは、使用したくないソリューションで現在私のコードがどのように見えるかです:

<div class="contentFadeAway" id="cfa1"></div>
<div class="contentFadeAway" id="cfa2"></div>
<div class="contentFadeAway" id="cfa3"></div>
<div class="contentFadeAway" id="cfa4"></div>
<div class="contentFadeAway" id="cfa5"></div>
<div class="contentFadeAway" id="cfa6"></div>
<div class="contentFadeAway" id="cfa7"></div>
<div class="contentFadeAway" id="cfa8"></div>
<div class="contentFadeAway" id="cfa9"></div>
<div class="contentFadeAway" id="cfa10"></div>

そしてCSS：

.contentFadeAway {
    display: block;
    position: fixed;
    top: 160px;

    padding: 0px;
    width: 100%;

    height: 5px;
    background: url('/assets/shapeimage_3_int.png') fixed;
    background-size:cover;
    z-index: +1;
}

#cfa1 { top: 160px; opacity: 1; }
#cfa2 { top: 165px; opacity: .9; }
#cfa3 { top: 170px; opacity: .8; }
#cfa4 { top: 175px; opacity: .7; }
#cfa5 { top: 180px; opacity: .6; }
#cfa6 { top: 185px; opacity: .5; }
#cfa7 { top: 190px; opacity: .4; }
#cfa8 { top: 195px; opacity: .3; }
#cfa9 { top: 200px; opacity: .2; }
#cfa10 { top: 205px; opacity: .1; }

そのコードが何をしているのか理解していない人のために、ここにあります : http://jsfiddle.net/FVNY7/2/その効果を与えるために、1から0までの不透明度を持つ同じ画像を持っています。背景が単色の場合は、rgba グラデーションを使用できますが、それは画像です。

4

3 に答える 3

5

クロスブラウザを最大限にサポートするには、背景画像を div に設定します。次に、その上に半透明のグラデーション背景を持つ別の div をオーバーレイします。

HTML:

<div class="content"></div>
<div class="FadeAway"></div>

CSS:

.content{ position:absolute; top:0px; left:0px; width:100%; height:100%; background:url('http://upload.wikimedia.org/wikipedia/commons/thumb/0/0c/GoldenGateBridge-001.jpg/400px-GoldenGateBridge-001.jpg') no-repeat; }

.FadeAway{
    position: absolute; top:0px; left:0px; width:100%; height:100%;
        background:transparent;
        background: linear-gradient(top, rgba( 255, 255, 255, 255 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
        background: -moz-linear-gradient(top, rgba( 255, 255, 255, 0) 0%, rgba( 255, 255, 255, 1 ) 100% );
        background: -ms-linear-gradient(top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
        background: -o-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
        background: -webkit-linear-gradient( top, rgba( 255, 255, 255, 0 ) 0%, rgba( 255, 255, 255, 1 ) 100% );
        -ms-filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#550000FF, endColorstr=#550000FF);
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#00ffffff, endColorstr=#ffffffff);
}

上記の例のフィドルは次のとおりです: http://jsfiddle.net/FVNY7/

于 2012-07-21T18:40:35.657 に答える
0

それは最良の実装ではない可能性があり、より良い方法がある可能性がありますが、私が見つけた最良の方法は、質問で言及したダウンしてダーティな実装です。PHPコードを使用すると、より洗練され、見栄えが良くなります。コードは次のとおりです。

<style>
.contentFadeAway {
    display: block;
    position: fixed;
    top: 160px;

    padding: 0px;
    width: 100%;

    height: 1px;
    background: url('/assets/shapeimage_3_int.png') fixed;
    background-size:cover;
    z-index: +1;
}
</style>


<?php 
    for ($int = "1"; $int <= "50"; $int++) {
        echo "<div class=\"contentFadeAway\" style=\"top: " . (160 + 1 * $int) . "px; opacity: " . (1 - .02 * $int) . ";\"></div>\";
        ";
    }   
?>
于 2012-07-22T06:56:18.280 に答える
0

私の問題に対する私の解決策は、現在のテクノロジーではこれが不可能であると簡単に述べるだけです。別のオプションは、単純な透明度グラデーションを使用することです。より良い解決策が見つかるまで、これが私がやることになります。

background: linear-gradient(to bottom, rgba(0,0,0,1) 0%,rgba(0,0,0,0) 100%);
于 2012-07-26T22:11:37.230 に答える