Question

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

背景颜色是渐变并且是固定的，因此它会创建一个漂亮的滚动效果，但是当旋转的div到达视口顶部时，会出现一个奇怪的渐变叠加。

只需看一下（你需要慢慢滚动，直到分隔符到达视口的顶部）： 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>

Answer 1

＆＃13;

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;
}

＆＃13;

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

＆＃13;

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

<强> Fiddle

Answer 2

我不喜欢与网页设计有任何关系，我对每个特定声明的作用都不了解，但是，这是我可以告诉你的。

您的形状不会显示渐变。用于渐变的颜色为红色/蓝色，仅显示蓝色
从三角形注释以下行，你会注意到你用于三角形的方块实际上是一个渐变！（蓝色到红色渐变）

background-attachment：fixed;

此外，如果您将背景附件模式设置为在任何位置滚动，您会注意到用于三角形渐变的方块不会按您的要求显示。

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

编辑：我已经搞乱了你的代码，如果你想保持渐变（从上到下）你可以使用这个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);
}

背景渐变＆amp;旋转创建奇怪的叠加

2 个答案: