Question

我创建了HTML的基本表单和app.css文件来设置页面样式。当我将渐变设置为background-image时，它不会显示在页面上：

HTML,
body {
  margin: 0;
  padding: 0;
  background-image: linear-gradient(120deg, #e0c3fc 0%, #8ec5fc 100%);
}

<body>
    <div class="today">
      <div
        class="titlu"
        style="color: black; margin-top: 5.5%; font-size: 65px;"
      >
        Autentificare
      </div>

      <form id="form" method="POST">
        <div class="form-group">
          <label for="email">email:</label>
          <input type="email" name="email" class="form-control" id="email" />
          <span id="msg"></span>
        </div>
        <div class="form-group">
          <label for="parola">Parola:</label>
          <input
            type="password"
            name="parola"
            class="form-control"
            id="parola"
          />
        </div>

        <div class="form-group">
          <button class="btn btn-outline-success btn-block elev">
            Autentifica-te
          </button>
        </div>
        <div
          class="alert alert-danger alert-dismissible fade show"
          style="display: none;"
        ></div>
      </form>
    </div>
</body>

当我在实时服务器中打开页面时，它显示如下：

Answer 1

尝试使用RBG值而不是十六进制。然后像这样将背景高度设置为100％。

    HTML,
    body {
      margin: 0;
      padding: 0;
      height:100%;
      background-image: linear-gradient(to right, rgba(224, 195, 252, 0),rgba (142, 197, 252, 1));
    }

Answer 2

尝试删除百分比，使其看起来像这样

background-image: linear-gradient(120deg, #e0c3fc, #8ec5fc);

并改用RGBA。

此外，我认为您的标题中有错字。

Answer 3

渐变属于图像数据类型，只能在可以使用图像的地方使用。因此，linear-gradient属性不适用于background-color属性和其他使用color数据类型的属性。

正确的声明将是

CSS

body {
background: linear-gradient(120deg, #FF0000 0%, #0000FF 100%);
}

来源：https://developer.mozilla.org/en-US/docs/Web/CSS/linear-gradient

Answer 4

body{
  background: #0e0c3f;
  background: -moz-linear-gradient(120deg, #0e0c3f 0%, #08ec60 100%);
  background: -webkit-gradient(left bottom, right top, color-stop(0%, #0e0c3f), color-stop(100%, #08ec60));
  background: -webkit-linear-gradient(120deg, #0e0c3f 0%, #08ec60 100%);
  background: -o-linear-gradient(120deg, #0e0c3f 0%, #08ec60 100%);
  background: -ms-linear-gradient(120deg, #0e0c3f 0%, #08ec60 100%);
  background: linear-gradient(120deg, #0e0c3f 0%, #08ec60 100%);
  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#0e0c3f', endColorstr='#08ec60', GradientType=1 );
  }

您可以使用此CSS代码，因为需要Webkit来支持可能使用的差异浏览器差异浏览器我可以知道您使用的是哪种浏览器。

您可以使用免费的渐变生成器网站来生成支持每个浏览器或尝试累积每个浏览器的渐变代码。

无法应用背景渐变

4 个答案: