Question

我正在使用从透明到白色的渐变。调整页面大小时，渐变会直观地改变。我的意思是这一点，因为当页面被挤压或展开时，渐变的透明部分会上下移动。

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

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

我在“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>

Answer 1

我不是专家，但是我打赌它是因为你的渐变是基于div的高度百分比。由于该div的高度和宽度发生变化，因此渐变也会发生变化。

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

1 个答案: