通過這些背景使容器變得更加透明和灰色漸變

我從另一個站點複製了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; 
}

和這個網站

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

我統計了畫面會更好地展示你正在發生漸變。請注意，內容到達右下方時，它變得越來越透明。我喜歡這個樣子，它太過分了。我嘗試了幾次改變一些數字和百分比，但是這看起來有點複雜，我似乎無法阻止右側變得像透明/灰色一樣。

此外，任何人都可以提供任何有關這些值如何影響內容的外觀的洞察力？

來源

2016-07-26 Chris Clark

你確定你想要一個漸變然後而不只是一個單一的背景顏色？ –

實際上，它變得不太透明，因爲它到達右下方，這是由於顏色較暗而導致的光學效果。

rgba（r，g，b，a）顏色的最後一個值是alpha值，越低的值越透明。

如果你想讓顏色變得更少灰色，那麼你可以修改「204」值到更高的值。

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

請檢查此page瞭解有關css漸變如何工作的完整信息。

來源

2016-07-26 13:45:21 MadMarc

通過這些背景使容器變得更加透明和灰色漸變

回答

相關問題