html - 使用这些背景渐变使容器不那么透明和灰色

Question

我从另一个站点复制了 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>

我认为一张图片可以更好地向您展示正在发生的渐变。 请注意，随着内容到达右下角，它变得越来越透明。我喜欢这个样子，它太多了。我尝试多次更改一些数字和百分比，但这似乎有点复杂，而且我似乎无法阻止右侧变得像现在一样透明/灰色。

此外，任何人都可以就这些值如何影响内容的外观提供任何见解吗？

Answer 1

实际上它越到右下角越不透明，这是一种光学效应，因为颜色变深了。

rgba(r,g,b,a)颜色的最后一个值是alpha，值越小越透明。

如果您希望颜色变得不那么灰，那么您可以将“204”值修改为更高的值。

即:
背景:线性渐变(135deg, rgba(255,255,255,0.9) 49%,rgba(235,235,235,0.95) 98%);

检查这个page有关 css 渐变如何工作的完整信息。