我怎样才能让我的渐变背景覆盖整个div？

Question

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

代码如下：

#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/

Answer 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%}}

<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>

Answer 2

此外，您可以按照此 https://codepen.io/alexcarpenter/pen/LveDx 此处的图像和 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>

我怎样才能让我的渐变背景覆盖整个div？

How can I make my gradient background cover the whole div?

html

css

wordpress

gradient

background