CSS背景从上到下线性渐变

问题描述 投票：0回答：5

我正在尝试创建从上到下的线性渐变，例如：

Gradient I want!

不幸的是我得到的是：

Gradient I get

以下是我的 HTML：

<!DOCTYPE html>
<html>
<head>
    <title>Test Page</title>
    <link rel="stylesheet" href="test.css">
</head>
<body>
        Hi
</body>
</html>

还有我的CSS：

body{
  background: linear-gradient(0deg, white, blue 80%) ;
}

如果我这样做

90deg
，而不是
0deg
，那么我会得到：

Gradient with 90deg

我需要这个渐变 - 但它应该旋转 90 度，即从上到下而不是从左到右。我很好奇为什么 0deg 似乎给出了类似于重复梯度的东西。

我使用过浏览器，Firefox 21 和 Chrome 27。如果您有任何建议，我将不胜感激。

css
5个回答
26
投票

尝试在 

<html>
上设置背景 - 可能更容易管理。然后也给它一个
height:100%;
，这样它肯定会扩展整个页面。

我还将其设置为 

no-repeat
，这样当您有较长的内容时，您只会获得一个渐变，而不是从底部开始。

html{
    height:100%;
    background: linear-gradient(0deg, white, blue 80%) no-repeat;
}

http://jsfiddle.net/daCrosby/nEQeZ/1/

编辑

fr13d 在评论中指出，当将渐变放在 

html
上时，渐变将在任何滚动之前停止在第一页的底部。也就是说，当您滚动时，渐变会被切断（如果背景颜色与渐变的较低颜色不同，则会很明显）。

解决此问题的一种方法是将样式放在 

body
上：

body{
    height:100%;
    background: linear-gradient(0deg, yellow, blue 80%) no-repeat;
}

http://jsfiddle.net/daCrosby/nEQeZ/117/

4
投票

我同意@DACrosby 的解决方案，但建议使用“固定”扩展背景。在这种情况下，您的背景将保持在原位，并且您将拥有整个网站的渐变，而不仅仅是顶部。

background: linear-gradient(0deg, red, blue 80%) fixed no-repeat;
2
投票

一种方法是为 

<body>
和 
<html>
元素提供明确的高度，因为前者没有，也没有任何内容：

http://jsfiddle.net/qL9mg/1/

2
投票

试试这个：

html {
    height: 100%;
    background: linear-gradient(0deg, white, blue 80%) ;
}

body {
    height: 0%;
}
0
投票

在 CSS 中使用 Before After - https://jsfiddle.net/ssuryar/1dsu6t3z/

HTML

<div class="gradient-bg">
    <div style="max-width:960px; margin:0 auto; padding:0 15px; box-sizing:border-box;">
        <div style="float:left; width:50%; position:relative; z-index:10;">
      <h2>Lorem ipsum dolor sit - Left</h2>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus. Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis,
        </div>
        <div style="float:left; width:40%; padding-left:10px;position:relative; z-index:10;">
        <h2>Lorem ipsum dolor sit - Right</h2>
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim. Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis

  </div>
        <div style="clear:both;"></div>
    </div>
</div>

CSS

*{
    margin:0 auto;
    }
  
  h2 {
    padding:10px 10px 10px 0px;
  }
    .gradient-bg{
         background:
        linear-gradient(180deg,
          #ff0 0%,
          #000 100%);
        position:relative;
        overflow:hidden;
        }
    .gradient-bg:after{
        width:50%;
        position:absolute;
        right:0;
        top:0;    
        content:"";
        display:block;
        height:100%;
        background-color:#fff;
        z-index:1;
        }
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.