如何将我的线性渐变宽度修改为 100%？答案

【问题标题】：How Do I Modify My Linear Gradient Width to 100%?如何将我的线性渐变宽度修改为 100%？
【发布时间】：2016-12-06 23:40:39
【问题描述】：

我的页脚 CSS 中有一个线性渐变，顶部为红色，底部为白色。我希望渐变是显示器的宽度，左右两边没有黑色边距。我的标题标记中有类似的代码，用于没有黑色边距的红色实线。

CSS

body { font-family: Arial; background-color: $black; width: 100%; font-size: 18px; margin:0 auto; }
footer, header { font-family: Eurostile; padding-top: 15px; margin:0 auto; .row { .row-col-img-padding { [class*="col-"] { padding-left: 0px !important; padding-right: 0px !important; } } } }
footer {
    color: $gray; font-weight: bold; font-style: italic; font-size: 90%; line-height: 100%; a { color: $bluedark; } 
    background: red; 
    background: linear-gradient($red, $white);
    background: -khtml-linear-gradient($red, $white); 
    background: -moz-linear-gradient($red, $white); 
    background: -ms-linear-gradient($red, $white); 
    background: -o-linear-gradient($red, $white); 
    background: -webkit-linear-gradient($red, $white); 
}
header { background-color: $black; p { color: $grayLight; font-weight: bold; font-size: 100%; line-height: 100%; } }

标题中实线的 CSS，其中红线填满屏幕，没有边距。

#back-red { background-color: $red; padding-bottom: 15px; }

标记

<footer class="footer">
  <div class="row row-col-img-padding">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" align="center">
      <ul class="list-inline">
        <li><%= link_to image_tag("footer-facebook-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "Facebook"), "https://www.facebook.com/xxxxxxx", target: '_blank' %></li>
        <li><%= link_to image_tag("footer-twitter-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "Twitter"), "https://twitter.com/xxxxxxxx", target: '_blank' %></li>
        <li><%= link_to image_tag("footer-linkedin-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "LinkedIn"), "http://www.linkedin.com/company/xxxxxx", target: '_blank' %></li>
        <li><%= link_to image_tag("footer-linkedin-bernard-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :translation_hash1}"), "http://www.linkedin.com/in/xxxxxxx", target: '_blank' %></li>
        <li><%= link_to image_tag("footer-linkedin-pam-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :translation_hash2}"), "http://www.linkedin.com/in/xxxxxxx", target: '_blank' %></li>
      </ul>
    </div>
  </div>
  <div class="row row-col-img-padding">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" align="center">
      <%= link_to image_tag("footer-privacypolicy-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :privacy_head1}"), privacy_path %>
      <div class="footer-links">
        <%= link_to "#{t :footer_link1}", locale_root_path %>
        <%= link_to "#{t :footer_link3}", system_path %>
        <%= link_to "#{t :footer_link4}", manage_path %>
        <%= link_to "#{t :footer_link6}", clients_path %>
        <%= link_to "#{t :footer_link2}", about_path %>
        <%= link_to "#{t :footer_link5}", contact_path %>
        <%= link_to "#{t :footer_link7}", media_path %><br>
        <%= link_to "Facebook", "https://www.facebook.com/LightBeCorp", target: '_blank' %>
        <%= link_to "Twitter", "https://twitter.com/lightbecorp", target: '_blank' %>
        <%= link_to "LinkedIn", "http://www.linkedin.com/company/lightbe-corp", target: '_blank' %>
        <%= link_to "#{t :footer_link8} xxxxxxxxxx", "http://www.linkedin.com/in/bernarddreyer", target: '_blank' %>
        <%= link_to "#{t :footer_link8} xxxxxxxxxx", "http://www.linkedin.com/in/pamelacooktulsaok", target: '_blank' %><br>
        <%= link_to "#{t :footer_link9}", privacy_path %>
        <%= link_to_unless_current "#{t :english}", locale: "en" %>
        <%= link_to_unless_current "Français", locale: "fr" %>
      </div>
      <p class="text-red-pad-top-10"><%= "#{t :footer2}" %> <span class="text-red">Light</span><span class="text-bluedark">Be</span> ©2010-<%= Time.now.strftime("%Y") %> - <%= "#{t :footer3}" %></p>
    </div>
  </div>
</footer>

标头标记

<header class="header">
  <div class="row row-col-img-padding" id="pad-bottom-15">
    <p class="locale-line" align="center"><span class="english-link"><%= link_to_unless_current "#{t :english}", locale: "en" %></span><%= link_to_unless_current "#{t :french}", locale: "fr" %></p>
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" align="center" id="header-images">
      <div class="page-class" align="center">
        <ul>
          <li><%= link_to image_tag("menu-home.jpg", class: "img-responsive aspect", alt: "#{t :footer_link1}"), locale_root_path %></li>
          <li><%= link_to image_tag("menu-manage-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :footer_link4}"), manage_path %></li>
          <li><%= link_to image_tag("menu-system-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :footer_link3}"), system_path %></li>
          <li><%= link_to image_tag("menu-media-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :footer_link7}"), media_path %></li>
          <li><%= link_to image_tag("menu-clients-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :footer_link6}"), clients_path %></li>
          <li><%= link_to image_tag("menu-about-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :footer_link2}"), about_path %></li>
          <li><%= link_to image_tag("menu-contact-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :footer_link5}"), contact_path %></li>
        </ul>
      </div>
    </div>
  </div>
  <div class="row row-col-img-padding" id="back-red">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" align="center">
      <h1><%= @page_title %></h1>
      <% if params[:action] == "system" && I18n.locale.to_s == "fr" %>
      <% else %>
        <p><%= @page_abstract1 %></p>
        <p><%= @page_abstract2 %></p>
        <p><%= @page_abstract3 %></p>
        <p><%= @page_abstract4 %></p>
        <p><%= @page_abstract5 %></p>
      <% end %>
      <p><%= @page_abstract6 %></p>
      <% if params[:action] == "system" && I18n.locale.to_s == "fr" %>
      <% else %>
        <p><%= @page_abstract7 %></p>
      <% end %>
    </div>
  </div>
</header>

Ruby on Rails application.html.erb

  <body>
    <div class="container-fluid"> 
      <%= render 'layouts/header' %> <!-- update app/views/layouts/_systemmessage.html.erb when you need to reboot the server -->
      <%= render 'layouts/systemmessage' %>
      <% flash.each do |key, value| %>
        <%= content_tag(:div, value, class: "alert alert-#{key}") %>
      <% end %>
      <%= yield %>
      <%= render 'layouts/contact_footer' %>
      <%= render 'layouts/footer' %>
    </div>
    <%= javascript_include_tag "application" %>
    <%= debug(params) if Rails.env.development? %>
  </body>

下图显示了我的 CSS 在 500px 和 320px 宽度下的工作方式。链接和图像使用 CSS .footer-links。它们会扩散到屏幕边缘，但渐变不会。

CSS 下面

.footer-links { width: 1024px; padding-top: 10px; a { padding-left: 5px; padding-right: 5px; } }

@media screen and (max-width: 1024px) { body, footer, header, .box-message, .footer-links, .page-class, .red-line-1px { max-width: 100%; } }

由于 header 和 footer 在 body 内，我认为我的问题在于渐变宽度。我看过很多与线性渐变和宽度相关的帖子，但我找不到任何可以准确解释我需要如何更改我的 CSS 以使其正常工作的文章。

【问题讨论】：

您还需要提供 HTML，而不仅仅是 CSS。
请发布实际产生问题的呈现的 html/css 的最小代码 sn-p
很好奇，发现了您的问题...为您的container-fluid 课程发布CSS，我会发布答案。您的 container-fluid 类具有左/右 15px 的填充，这会导致页脚上的黑色边距，以及为什么您的页眉不受影响，是因为它有一个负的左右边距来补偿填充。
我没有任何用于容器流体的 CSS。但是，我的标题中的实线红线有效。除了渐变，一切都 100% 有效。

标签： html css twitter-bootstrap-3 footer linear-gradients

【解决方案1】：

Bootstraps .container-fluid 规则如下所示

{margin-right:auto;margin-left:auto;padding-left:15px;padding-right:15px}

所以为了让你的footer 工作，你可以这样做，主要的变化是添加一个包装器<div class="row">，然后删除row 类 <div class="row-col-img-padding">，然后在wrapper上设置渐变

footer 的标记

  <footer class="footer">
    <div class="row">
      <div class="row-col-img-padding">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" align="center">
          <ul class="list-inline">
            <li><%= link_to image_tag("footer-facebook-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "Facebook"), "https://www.facebook.com/xxxxxxx", target: '_blank' %></li>
            <li><%= link_to image_tag("footer-twitter-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "Twitter"), "https://twitter.com/xxxxxxxx", target: '_blank' %></li>
            <li><%= link_to image_tag("footer-linkedin-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "LinkedIn"), "http://www.linkedin.com/company/xxxxxx", target: '_blank' %></li>
            <li><%= link_to image_tag("footer-linkedin-bernard-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :translation_hash1}"), "http://www.linkedin.com/in/xxxxxxx", target: '_blank' %></li>
            <li><%= link_to image_tag("footer-linkedin-pam-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :translation_hash2}"), "http://www.linkedin.com/in/xxxxxxx", target: '_blank' %></li>
          </ul>
        </div>
      </div>
      <div class="row-col-img-padding">
        <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" align="center">
          <%= link_to image_tag("footer-privacypolicy-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :privacy_head1}"), privacy_path %>
          <div class="footer-links">
            <%= link_to "#{t :footer_link1}", locale_root_path %>
            <%= link_to "#{t :footer_link3}", system_path %>
            <%= link_to "#{t :footer_link4}", manage_path %>
            <%= link_to "#{t :footer_link6}", clients_path %>
            <%= link_to "#{t :footer_link2}", about_path %>
            <%= link_to "#{t :footer_link5}", contact_path %>
            <%= link_to "#{t :footer_link7}", media_path %><br>
            <%= link_to "Facebook", "https://www.facebook.com/LightBeCorp", target: '_blank' %>
            <%= link_to "Twitter", "https://twitter.com/lightbecorp", target: '_blank' %>
            <%= link_to "LinkedIn", "http://www.linkedin.com/company/lightbe-corp", target: '_blank' %>
            <%= link_to "#{t :footer_link8} xxxxxxxxxx", "http://www.linkedin.com/in/bernarddreyer", target: '_blank' %>
            <%= link_to "#{t :footer_link8} xxxxxxxxxx", "http://www.linkedin.com/in/pamelacooktulsaok", target: '_blank' %><br>
            <%= link_to "#{t :footer_link9}", privacy_path %>
            <%= link_to_unless_current "#{t :english}", locale: "en" %>
            <%= link_to_unless_current "Français", locale: "fr" %>
          </div>
          <p class="text-red-pad-top-10"><%= "#{t :footer2}" %> <span class="text-red">Light</span><span class="text-bluedark">Be</span> ©2010-<%= Time.now.strftime("%Y") %> - <%= "#{t :footer3}" %></p>
        </div>
      </div>
    </div>
  </footer>

将您的 CSS footer 规则更改为此

footer {
    padding-top: 0
}

将现有footer 规则的内容移动到新规则footer > .row，像这样

footer > .row {
    padding-top: 15px;     /*  added new property  */

    color: $gray; font-weight: bold; font-style: italic; font-size: 90%; line-height: 100%; a { color: $bluedark; } 
    background: red; 
    background: linear-gradient($red, $white);
    background: -khtml-linear-gradient($red, $white); 
    background: -moz-linear-gradient($red, $white); 
    background: -ms-linear-gradient($red, $white); 
    background: -o-linear-gradient($red, $white); 
    background: -webkit-linear-gradient($red, $white); 
}

【讨论】：

效果很好。渐变在所有宽度上都是 100%。这就是我需要的。非常感谢！

【解决方案2】：

好的。复制了您的代码，删除了一些 css，正如我所想，页脚的行为就像块级元素一样。这意味着页脚的边距是由于您提供的代码之外的其他原因，或者它在我从您的 css 中取出的代码中（尽管它不应该是）。

而且，如果您提到您正在使用某种框架，并且实际发布了 CSS，而不是您拥有的任何非构建 *CSS，这会更容易。另外，如果你把它做成小提琴，你会看到它是 100% 宽的。因此，问题要么是因为该页脚被包裹在其他东西（另一个 div？）中，要么是因为您的示例或代码不是实际代码。停止在示例中使用特定于框架的代码。至少当你没有提到你正在使用什么框架时。

body { font-family: Arial; background-color: black; width: 100%; font-size: 18px; margin:0 auto; }

footer {
    color: gray; font-weight: bold; font-style: italic; font-size: 90%; line-height: 100%; 
    background: red; 
    background: linear-gradient(red, white);
    background: -khtml-linear-gradient(red, white); 
    background: -moz-linear-gradient(red, white); 
    background: -ms-linear-gradient(red, white); 
    background: -o-linear-gradient(red,white); 
    background: -webkit-linear-gradient(red, white); 
}

#back-red { background-color: red; padding-bottom: 15px; }

<footer class="footer">
  <div class="row row-col-img-padding">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" align="center">
      <ul class="list-inline">
        <li><%= link_to image_tag("footer-facebook-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "Facebook"), "https://www.facebook.com/xxxxxxx", target: '_blank' %></li>
        <li><%= link_to image_tag("footer-twitter-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "Twitter"), "https://twitter.com/xxxxxxxx", target: '_blank' %></li>
        <li><%= link_to image_tag("footer-linkedin-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "LinkedIn"), "http://www.linkedin.com/company/xxxxxx", target: '_blank' %></li>
        <li><%= link_to image_tag("footer-linkedin-bernard-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :translation_hash1}"), "http://www.linkedin.com/in/xxxxxxx", target: '_blank' %></li>
        <li><%= link_to image_tag("footer-linkedin-pam-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :translation_hash2}"), "http://www.linkedin.com/in/xxxxxxx", target: '_blank' %></li>
      </ul>
    </div>
  </div>
  <div class="row row-col-img-padding">
    <div class="col-lg-12 col-md-12 col-sm-12 col-xs-12" align="center">
      <%= link_to image_tag("footer-privacypolicy-#{I18n.locale}.jpg", class: "img-responsive aspect", alt: "#{t :privacy_head1}"), privacy_path %>
      <div class="footer-links">
        <%= link_to "#{t :footer_link1}", locale_root_path %>
        <%= link_to "#{t :footer_link3}", system_path %>
        <%= link_to "#{t :footer_link4}", manage_path %>
        <%= link_to "#{t :footer_link6}", clients_path %>
        <%= link_to "#{t :footer_link2}", about_path %>
        <%= link_to "#{t :footer_link5}", contact_path %>
        <%= link_to "#{t :footer_link7}", media_path %><br>
        <%= link_to "Facebook", "https://www.facebook.com/LightBeCorp", target: '_blank' %>
        <%= link_to "Twitter", "https://twitter.com/lightbecorp", target: '_blank' %>
        <%= link_to "LinkedIn", "http://www.linkedin.com/company/lightbe-corp", target: '_blank' %>
        <%= link_to "#{t :footer_link8} xxxxxxxxxx", "http://www.linkedin.com/in/bernarddreyer", target: '_blank' %>
        <%= link_to "#{t :footer_link8} xxxxxxxxxx", "http://www.linkedin.com/in/pamelacooktulsaok", target: '_blank' %><br>
        <%= link_to "#{t :footer_link9}", privacy_path %>
        <%= link_to_unless_current "#{t :english}", locale: "en" %>
        <%= link_to_unless_current "Français", locale: "fr" %>
      </div>
      <p class="text-red-pad-top-10"><%= "#{t :footer2}" %> <span class="text-red">Light</span><span class="text-bluedark">Be</span> ©2010-<%= Time.now.strftime("%Y") %> - <%= "#{t :footer3}" %></p>
    </div>
  </div>
</footer>

【讨论】：

这是迄今为止我看到的最大的评论......我也看不出它实际上是如何回答这个问题的。请编辑或删除
它确实回答了这个问题 - 代码是否显示 100% 宽度渐变？是还是不是？
@junkfoodjunkie，你和另一个人要求我提供我的 CSS 和 HTML 代码，这就是我所做的，每一行都直接从我的 Web 应用程序中复制。我正在使用 Ruby on Rails（这无关紧要）。我刚刚添加了我的页眉标记和 application.html.erb 文件的一部分，显示我的页眉和页脚位于同一个容器流体 div 中。正如我所说，我在页眉中的红线 (id="back-red") 一直穿过这条线，但我的页脚没有。
首先我读了一大段文字，只抱怨OP的帖子，其次，我看到的只是一大段代码，没有解释你为解决问题所做的一切，所以它作为一个答案几乎没有用，恕我直言
嗯，答案应该回答问题，而不是说错误不在提供的代码中，因为不回答了问题，它只是说明错误在其他地方。那么，当导致它的错误不存在时，如何给出答案呢？ ...这对你有意义吗？

【解决方案3】：

你可以试试

background-size: 100% 100%;

您可能不需要在水平和垂直方面都 100%，但试一试。

没有您的 HTML 很难看到。您可能还需要特定于浏览器的 CSS，例如

-o-background-size: 100% 100%;
-moz-background-size: 100% 100%;
-webkit-background-size: 100% 100%;

【讨论】：

我试过 background-size: 100%;对于我编写的所有浏览器，但它不起作用。我刚试过 background-size: 100% 100%;适用于所有浏览器。它仍然不起作用。我在问题中添加了我的 HTML。
我很高兴你得到了一个有帮助的答案。知道您正在使用引导程序会有所帮助。在这些情况下，我通常使用 firebug 来查看导致问题的原因。通常是容器填充或类似的东西。
我的 CSS 和标记中有我认为人们会识别为 Bootstrap 3 的代码。我最初忘记标记它，但更正了那个。