2016-07-26 11 views
0

別のサイトからCSSをコピーしました。私はCSSの専門家ではない。 私はこのCSSこれらの背景グラデーションでコンテナの透明性と灰色を薄くする

.power-top-container { 
    background: rgb(255,255,255); 
    background: -moz-linear-gradient(-45deg, rgba(255,255,255,0.9) 49%, rgba(204,204,204,0.95) 98%); 
    background: -webkit-gradient(linear, left top, right bottom, color-stop(49%,rgba(255,255,255,0.9)), color-stop(93%,rgba(204,204,204,0.95))); 
    background: -webkit-linear-gradient(-45deg, rgba(255,255,255,0.9) 49%,rgba(204,204,204,0.95) 98%); 
    background: -o-linear-gradient(-45deg, rgba(255,255,255,0.9) 49%,rgba(204,204,204,0.95) 98%); 
    background: -ms-linear-gradient(-45deg, rgba(255,255,255,0.9) 49%,rgba(204,204,204,0.95) 98%); 
    background: linear-gradient(135deg, rgba(255,255,255,0.9) 49%,rgba(204,204,204,0.95) 98%); 
    padding: .8em 1.5em .8em 1.7em; 
    border-radius: 6px; 
} 

このHTML

    <div class="row"> 
        <div class="small-10 large-10 large-centered columns"> 
         <div class="power-container"> 
          <div class="power-top-container"> 
           <p class="">Quisque ante quam, imperdiet vitae velius. Donec ligula orci, posuere sed suscipit at, feugiat vel mi. 
          </div> 
         </div> 

        </div> 
       </div> 
       <div class="row"> 
        <div class="small-10 large-5 columns"> 
         <div class="power-container" style=""> 
          <div id="" class="power-top-container"> 
           <p> 
            Quisque ante quam, imperdiet vitae velius. Donec ligula orci, posuere sed suscipit at, feugiat vel mi. 
           </p> 

          </div> 
         </div> 
        </div> 
        <div class="small-10 large-6 columns"> 
          <div class="power-container" style=""> 
           <div id="" class="power-top-container"> 
            <p> 
             Quisque ante quam, imperdiet vitae velius. Donec ligula orci, posuere sed suscipit at, feugiat vel mi. 
            </p> 
            <img src="/PowerImages/cat.png" alt="cat Test Image" style="width:180px; height: 180px"/> 
           </div> 
          </div> 
         </div> 

を持っている私は絵が良いあなたに起こっているの勾配を示すだろう把握。 Gradient image becomes too see throughコンテンツが右下に達すると、そのコンテンツはますます透明になります。私はこれの外観が好きです、それはあまりにも多くです。数字やパーセンテージを数回変更しようとしましたが、これは少し複雑に思えますし、右側が透過/グレーのままになるのを止める何かを得ることはできません。

さらに、これらの値がコンテンツの外観にどのように影響するかについての洞察は誰でも提供できますか?

+0

ただ1つの背景色ではなく、グラデーションをしてもよろしいですか? –

答えて

1

実際には、右下に行くほど透明度が低くなります。色が濃いために光学的効果があります。

rgba(r、g、b、a)の最後の値はアルファです。値が小さいほど値が大きくなります。

色が灰色にならないようにするには、「204」の値をより高い値に変更します。

I.e. :
background: linear-gradient(135deg, rgba(255,255,255,0.9) 49%,rgba(235,235,235,0.95) 98%);

CSSのグラディエントの仕組みの詳細については、pageを参照してください。

関連する問題