为什么在调整浏览器窗口大小时我的线性渐变会移动？答案

【问题标题】：Why is my linear gradient moving when the browser window is resized?为什么在调整浏览器窗口大小时我的线性渐变会移动？
【发布时间】：2015-03-04 02:38:41
【问题描述】：

我正在使用从透明到白色的渐变。调整页面大小时，渐变会在视觉上发生变化。我的意思是，当页面被压扁或展开时，渐变的透明部分会上下移动。

为什么会发生这种情况，有什么办法可以解决吗？

我已在多个浏览器中对此进行了测试，但无法在互联网上找到答案。我也在我的代码中使用引导程序，但我认为它不会以任何方式影响这一点。

我在“TEXT GOES HERE”中输入了两三组 ipsum lorem 来模拟一个大型网站。

这是一个jsfiddle 模拟问题，移动页面大小以使其更大或更小（在 jsfiddle 上，您必须使其非常小才能看到效果）。

注意：我是学生，上一次使用 HTML/CSS 是一年多以前，所以我有点生疏了。如果您需要更多信息，请发表评论。谢谢

CSS

 body {
background: url(http://www.sweetideascandy.com/wp-content/themes/sweetideas/images/bg-body.jpg);
}
#logo {
float:right;
width: 103%;
height: auto;
width: auto\9;
/* ie8 */
position: relative;
overflow:visible;
}
#centerdiv {
background: linear-gradient(0deg, rgba(255, 255, 255, 0.9) 0%, rgba(255, 255, 255, 0.9) 88%, rgba(255, 255, 255, 0) 100%);
/* w3c */    
}

HTML

<body>
<!-- This is the Master All encompasing div -->
<div class="row">
    <div class="col-sm-3"></div>

    <!-- This is the Center div -->
    <div id="centerdiv" class="col-sm-6">

        <!-- Sweet Ideas Logo -->
        <div class="row">
            <div class="col-sm-12">
                <img id="logo" src="http://www.sweetideascandy.com/wp-content/uploads/2014/03/logo.png" />
            </div>
        </div>
        <!-- --/Sweet Ideas Logo--- -->

        <div>
            <p> Text Goes here. </p>
        </div>

    </div>
    <div class="col-sm-3"></div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>

【问题讨论】：

引导程序的可调整 div 确实会导致渐变移动。有没有人知道解决这个问题的方法或捷径来尝试在我的 JSfiddle 中完成我想要的，而不会在收缩/扩展时破坏？

标签： html css linear-gradients

【解决方案1】：

我不是专家，但我敢打赌这是因为您的渐变是基于似乎是您的 div 的百分比高度。由于该 div 的高度和宽度会发生变化，因此渐变也会在视觉上发生变化。

【讨论】：