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，值越低，它就越透明。

如果您希望颜色变得不那么灰，那么您可以修改＆＃34; 204＆＃34;值得更高。

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

检查此page以获取有关css渐变如何工作的完整信息。

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

1 个答案: