Question

我使用线性渐变作为body的背景。它 适用于Safari，但不适用于Chrome 。我已经搜索过Stack Overflow，到目前为止我还没有任何工作。它仅适用于Chrome以外的浏览器（Chrome 49）。

我试图使用的代码来自一个支持所有浏览器的生成器。

body {
    background: rgba(121, 91, 176, 1);
    background: -moz-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
    background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(121, 91, 176, 1)), color-stop(66%, rgba(74, 193, 255, 1)), color-stop(92%, rgba(76, 234, 255, 1)), color-stop(100%, rgba(76, 234, 255, 1)));
    background: -webkit-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
    background: -o-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
    background: -ms-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
    background: linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#795bb0', endColorstr='#4ceaff', GradientType=1);
}

以下是重现问题的HTML：

<!DOCTYPE html>
<html>
  <head>
    <title>Site</title>
    <meta name="robots" content="noindex">
    <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/3.0.3/normalize.min.css" />
    <link rel="stylesheet" type="text/css" href="css/main.css" />
    <script src="https://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
  </head>
  <body>
    <!-- JS WARN -->
    <div>
      <link rel="stylesheet" type="text/css" href="https://cdn.rawgit.com/Verpz/Javascript-Disabled-Warning-Popup/b10b9ebe28a92ffe746eb7e6fb6e0d3497c3afdd/js-warn.css">
      <input type="checkbox" id="js-hide" />
      <div class="js-warn" id="js-warn-exit"><h1>Javascript Is Disabled</h1><p>Javascript seems to be disabled. This will break some site features.</p>
      <p>To enable Javascript click <a href="http://www.enable-javascript.com/" target="_blank">here</a></p><label for="js-hide">Close</label></div>
      <script>var jswarn = document.getElementById("js-warn-exit"); jswarn.parentNode.removeChild(jswarn);</script>
    </div>
    <!-- /JS WARN -->
  </body>
</html>

任何建议都会很棒。感谢。

Answer 1

通常情况下，body标签本身并没有任何高度，因此渐变不会显示出来，我们必须向其添加一些内容（或）给它一些明确的高度。添加固定高度值可能并不总是可行，因此最好添加min-height: 100vh（也就是说，高度至少与视口的高度一样多。）

注意： IE，Edge，Firefox和Chrome的行为一致。我试图找到为什么Safari以不同方式处理它。我会把信息编辑成答案。

＆＃13;

body {
  min-height: 100vh;
  background: rgba(121, 91, 176, 1);
  background: -moz-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
  background: -webkit-gradient(left bottom, right top, color-stop(0%, rgba(121, 91, 176, 1)), color-stop(66%, rgba(74, 193, 255, 1)), color-stop(92%, rgba(76, 234, 255, 1)), color-stop(100%, rgba(76, 234, 255, 1)));
  background: -webkit-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
  background: -o-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
  background: -ms-linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
  background: linear-gradient(45deg, rgba(121, 91, 176, 1) 0%, rgba(74, 193, 255, 1) 66%, rgba(76, 234, 255, 1) 92%, rgba(76, 234, 255, 1) 100%);
  filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#795bb0', endColorstr='#4ceaff', GradientType=1);
}

＆＃13;

CSS Gradient无法在Chrome中运行49

1 个答案: