別のサイトから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>
を持っている私は絵が良いあなたに起こっているの勾配を示すだろう把握。 コンテンツが右下に達すると、そのコンテンツはますます透明になります。私はこれの外観が好きです、それはあまりにも多くです。数字やパーセンテージを数回変更しようとしましたが、これは少し複雑に思えますし、右側が透過/グレーのままになるのを止める何かを得ることはできません。
さらに、これらの値がコンテンツの外観にどのように影響するかについての洞察は誰でも提供できますか?
ただ1つの背景色ではなく、グラデーションをしてもよろしいですか? –