Question

我正在尝试使用我在“body”标记中定义的以下CSS类在整个HTML页面上应用渐变：

.gradient{
    font-family: Roboto Black;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 100%;
    background: #234199;
    background: -webkit-linear-gradient(#234199 0%, #7db9e8 100%);
    background: -o-linear-gradient(#234199 0%, #7db9e8 100%);
    background: linear-gradient(#234199 0%, #7db9e8 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( 
    startColorstr='#234199', endColorstr='#7db9e8', GradientType=0 );
}

但是侧边栏超出了视口区域时出现了一个尖锐的边缘，似乎渐变开始重复（如图所示）。任何人都可以解决这个问题吗？

Answer 1

也许尝试将高度设为自动而不是100％？

Answer 2

在height: 100%元素上设置<html>，它应填充视口。

以下是一个示例：https://codepen.io/anon/pen/JMjYrq

Answer 3

您可以尝试使用以固定位置拉伸到整个页面的伪元素：

＆＃13;

.gradient {
  font-family: Roboto Black;
  position: relative;
}
.gradient:before {
  content: "";
  position: fixed;
  z-index:-2;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background-repeat: no-repeat;
  background: #234199;
  background: -webkit-linear-gradient(#234199 0%, #7db9e8 100%);
  background: -o-linear-gradient(#234199 0%, #7db9e8 100%);
  background: linear-gradient(#234199 0%, #7db9e8 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#234199', endColorstr='#7db9e8', GradientType=0);
}

＆＃13;

<body class="gradient">

</body>

＆＃13;

如何在html中

3 个答案: