如何让我的渐变背景覆盖整个 div？答案

【问题标题】：How can I make my gradient background cover the whole div?如何让我的渐变背景覆盖整个 div？
【发布时间】：2018-10-11 08:26:29
【问题描述】：

我正在努力使网站更易于阅读。我成功地用背景渐变覆盖了我的照片，使字母更明显。问题是背景渐变没有覆盖整个 div/图像。

代码如下：

#us_grid_1 .usg_vwrapper_1 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: 5rem;
    padding-right: 2rem;
    padding-bottom: 1.5rem;
    padding-left: 2rem;
}

    #us_grid_1 .usg_vwrapper_1 {
    background: linear-gradient( transparent, rgba(30,30,30,0.8));
}

<style id="us_grid_1_css">@media (max-width:1023px){#us_grid_1 .w-grid-item{width:50%}#us_grid_1 .w-grid-item.size_2x1,#us_grid_1 .w-grid-item.size_2x2{width:100%}}@media (max-width:767px){#us_grid_1 .w-grid-item{width:50%}#us_grid_1 .w-grid-item.size_2x1,#us_grid_1 .w-grid-item.size_2x2{width:100%}}@media (max-width:599px){#us_grid_1 .w-grid-item{width:100%}}</style>
<div class="w-vwrapper usg_vwrapper_1 align_left valign_bottom bg_gradient "><h2 class="w-grid-item-elm usg_post_title_1 color_link_inherit with_text_color  post_title entry-title">Connections Panel</h2></div>

在本网站： https://marketingsciences.nl/

【问题讨论】：

css 中的#us_grid_1 是什么？？
CSS 不适用于您的代码。
#us_grid_1 的 css 为 .usg_vwrapper 提供了一个渐变背景来覆盖它。
.usg_vwrapper_1 div 的 css 出现在我的代码中。我只想在这里显示相关代码。如果我可以通过提供更多信息来澄清它，请告诉我。

标签： html css wordpress background gradient

【解决方案1】：

从css中删除#us_grid_1，因为你没有在html中设置id=us_grid_1

了解selector in css

 .usg_vwrapper_1 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: 5rem;
    padding-right: 2rem;
    padding-bottom: 1.5rem;
    padding-left: 2rem;
}

.usg_vwrapper_1 {
    background: linear-gradient( transparent, rgba(30,30,30,0.8));
}
@media (max-width:1023px){
.w-grid-item{width:50%}
.w-grid-item.size_2x1,
.w-grid-item.size_2x2{width:100%}
}
@media (max-width:767px){
.w-grid-item{width:50%}
.w-grid-item.size_2x1,
.w-grid-item.size_2x2{width:100%}
}
@media (max-width:599px){
.w-grid-item{width:100%}}

&lt;div class="w-vwrapper usg_vwrapper_1 align_left valign_bottom bg_gradient"&gt;&lt;h2 class="w-grid-item-elm usg_post_title_1 color_link_inherit with_text_color  post_title entry-title"&gt;Connections Panel&lt;/h2&gt;&lt;/div&gt;

【讨论】：

我发现#us_grid_1 id是html中的内联样式元素。它确保您提供的 css 属性仅适用于该特定部分。我将代码添加到我的 sn-p 中。
但是你在 HTML 中没有 #us_grid_1 id 这样的<div id="us_grid_1"></div>
在 sn-ps 中查看我放置
那又怎样？？您必须根据 html 标签在 css 中设置样式（事实上您将 id 设置为 style 标签没有帮助）
我真的很抱歉，但你必须多学一点css

【解决方案2】：

另外，你可以关注这个https://codepen.io/alexcarpenter/pen/LveDx here 图片和gradient都使用combaundky

#us_grid_1 .usg_vwrapper_1 {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    padding-top: 5rem;
    padding-right: 2rem;
    padding-bottom: 1.5rem;
    padding-left: 2rem;
}
.bg_gradient {
    background-image: linear-gradient(to bottom, rgba(156, 106, 106, 0), #008464);
    height: 200px;
}

<style id="us_grid_1_css">@media (max-width:1023px){#us_grid_1 .w-grid-item{width:50%}#us_grid_1 .w-grid-item.size_2x1,#us_grid_1 .w-grid-item.size_2x2{width:100%}}@media (max-width:767px){#us_grid_1 .w-grid-item{width:50%}#us_grid_1 .w-grid-item.size_2x1,#us_grid_1 .w-grid-item.size_2x2{width:100%}}@media (max-width:599px){#us_grid_1 .w-grid-item{width:100%}}</style>
<div class="w-vwrapper usg_vwrapper_1 align_left valign_bottom bg_gradient "><h2 class="w-grid-item-elm usg_post_title_1 color_link_inherit with_text_color  post_title entry-title">Connections Panel</h2></div>

【讨论】：

也很有帮助。谢谢！