Question

我正在尝试将渐变应用于图像，该图像被设置为页脚元素的背景图像。我已经确认motif.png存在于与html文件相同的文件夹中。我有一个示例html页面如下。 JsFiddle here

<!DOCTYPE html>
<html>
  <head>
    <title>this is a dummy title</title>
    <style>
      #footer {
          color:#777;
          display:block;
          vertical-align:bottom;
          background:  #3c8dbc !important;
          background-image: url(motif.png) repeat, -webkit-gradient(linear, left bottom, left top, color-stop(0, #3c8dbc), color-stop(1, #67a8ce)) !important;
          background-image: url(motif.png) repeat, -ms-linear-gradient(bottom, #3c8dbc, #67a8ce) !important;
          background-image: url(motif.png) repeat, -moz-linear-gradient(center bottom, #3c8dbc 0%, #67a8ce 100%) !important;
          background-image: url(motif.png) repeat, -o-linear-gradient(#67a8ce, #3c8dbc) !important;
          filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#67a8ce', endColorstr='#3c8dbc', GradientType=0) !important;
          color: #fff;
          border-top:#252525 5px solid;
          z-index:101;
        }
    </style>
  </head>
  <body>
    <p>You are welcome</p>
  </body>
  <footer id="footer">
    <div class="container">
      <div class="row">
        <p>Dummy Para</p>
      </div>
    </div>
    <hr>
    <div class="container">
      <div class="row">
        <p>Copyright Paragraph</p>
      </div>
    </div>
  </footer>
</html>

我现在想知道为什么图像和背景渐变没有应用于它。仅应用颜色。请给我一些帮助。

更新根据泰勒的建议，我已经完成了这个

  background: url(motif.png) repeat #3c8dbc !important;
  background:  -webkit-gradient(linear, left bottom, left top, color-stop(0, #3c8dbc), color-stop(1, #67a8ce)) !important;
  background:  -ms-linear-gradient(bottom, #3c8dbc, #67a8ce) !important;
  background:  -moz-linear-gradient(center bottom, #3c8dbc 0%, #67a8ce 100%) !important;
  background:  -o-linear-gradient(#67a8ce, #3c8dbc) !important;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#67a8ce', endColorstr='#3c8dbc', GradientType=0) !important;

应用渐变，但不应用图像。

Answer 1

你在这里

＆＃13;

      #footer {
        color: #777;
        display: block;
        vertical-align: bottom;
        background: #3c8dbc;
        background-image: url("http://www.transparenttextures.com/patterns/back-pattern.png"), -moz-linear-gradient(top, #3c8dbc 0%, #67a8ce 100%);
        background-image: url("http://www.transparenttextures.com/patterns/back-pattern.png"), -webkit-gradient(linear, left top, left bottom, color-stop(0%, #3c8dbc), color-stop(100%, #67a8ce));
        background-image: url("http://www.transparenttextures.com/patterns/back-pattern.png"), -webkit-linear-gradient(top, #3c8dbc 0%, #67a8ce 100%);
        background-image: url("http://www.transparenttextures.com/patterns/back-pattern.png"), -o-linear-gradient(top, #3c8dbc 0%, #67a8ce 100%);
        background-image: url("http://www.transparenttextures.com/patterns/back-pattern.png"), -ms-linear-gradient(top, #3c8dbc 0%, #67a8ce 100%);
        background-image: url("http://www.transparenttextures.com/patterns/back-pattern.png"), linear-gradient(to bottom, #3c8dbc 0%, #67a8ce 100%);
        filter: progid: DXImageTransform.Microsoft.gradient(startColorstr='#3c8dbc', endColorstr='#67a8ce', GradientType=0);
        color: #fff;
        border-top: #252525 5px solid;
        z-index: 101;
      }

＆＃13;

<footer id="footer">
  <div class="container">
    <div class="row">
      <p>Dummy Para</p>
    </div>
  </div>
  <hr />
  <div class="container">
    <div class="row">
      <p>Copyright Paragraph</p>
    </div>
  </div>
</footer>

＆＃13;

这个css不适用于页脚元素

1 个答案: