背景渐变和旋转创建奇怪的叠加答案

【问题标题】：background gradient & rotation create strange overlay背景渐变和旋转创建奇怪的叠加
【发布时间】：2014-10-11 08:22:25
【问题描述】：

我在我的网站上使用带有旋转正方形的条形作为分隔符。

background-color 是一个渐变色并且是固定的，所以它创建了一个很好的滚动效果，但是当旋转的 div 到达 view-port 顶部时，会出现一个奇怪的渐变叠加层。

看看它（你需要慢慢滚动直到分隔符到达视口的顶部）： http://jsfiddle.net/nff2fjf7/4/

body {
    height:800px;
}
.seperator {
    margin:100px 0 0 0;
    background-attachment: fixed;
    background-color: rgba(0, 157, 197, 1);
    background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    width:100%;
    height:40px;
    text-align: center;
}
.triangle {
    width:40px;
    height:40px;
    display: inline-block;
    margin: 10px 0;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background-attachment: fixed;
    background-color: rgba(0, 157, 197, 1);
    background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
}

<body>
    <div class="seperator">
        <div class="triangle"></div>
    </div>
</body>

【问题讨论】：

标签： html css gradient background-color

【解决方案1】：

body {
    height:800px;
}
.seperator {
    margin:100px 0 0 0;
    background-attachment: fixed;
    background-color: rgba(0, 157, 197, 1);
    background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    width:100%;
    height:40px;
    text-align: center;
}
.triangle {
    width:40px;
    height:40px;
    display: inline-block;
    margin: 10px 0;
    -moz-transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    transform: rotate(45deg);
    background-attachment: fixed;
    background-color: rgba(0, 157, 197, 1);
    background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-repeat:no-repeat;
}

<body>
    <div class="seperator">
        <div class="triangle"></div>
    </div>
</body>

在.triangle 上设置background-repeat:no-repeat 似乎可以在页面顶部解决它，但问题仍然存在于底部：/

Fiddle

【讨论】：

谢谢你，至少最重要的问题已经解决了。是的，我没有提到这也发生在页面末尾。

【解决方案2】：

我不是任何与网页设计有关的专业人士，我对每个特定陈述的作用知之甚少，但是，这是我可以告诉你的。

您的形状不会以渐变方式显示。您用于渐变的颜色是红色/蓝色，并且仅显示蓝色
从三角形中评论以下行，您会注意到您用于三角形的正方形实际上得到了渐变！（蓝到红渐变）

背景附件：固定；

另外，如果您将背景附件模式设置为到处滚动，您会注意到用于三角形渐变的正方形不会按您想要的方式显示。

如果你对颜色很好，你就不需要渐变。

编辑：我弄乱了你的代码，如果你想保持渐变（从上到下），你可以使用这个code，这是你的带有滚动背景附件和修改过的三角形的代码：

body {
    height:800px;
}
.seperator {
    margin:100px 0 0 0;
    background-attachment: scroll;
    background-color: rgba(0, 157, 197, 1);
    background-image: -webkit-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: -moz-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: -o-linear-gradient(top, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    background-image: linear-gradient(to bottom, rgba(0, 157, 197, 1), rgba(231, 52, 76, 1));
    width:100%;
    height:40px;
    text-align: center;
}
.triangle{
    width: 0; 
    height: 0; 
    display: inline-block;
    margin: 40px 0;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-top: 30px solid rgba(231, 52, 76, 1);
}

【讨论】：

如果滚动页面，渐变颜色会发生变化。这就是background-attachment:fixed 的用途。我稍微修改了小提琴。 Have a look at this fiddle 滚动时可以看到颜色变化。
我可以告诉你为什么会发生，但我现在不知道如何“正确”修复它。您会得到这种行为，因为您的旋转正方形进入负屏幕坐标并且它从原始顶部重新计算颜色，而不是旋转的。当正方形离开屏幕时，正方形的不可见部分（或如果不旋转则将不可见的部分）的行为就像在另一侧绘制一样。因此，如果您将正方形放在屏幕顶部，使其几乎不可见，则不可见部分将如同位于屏幕底部一样，反之亦然。
如果将方块一直滚动到底部，您将看到类似的行为。