Question

我正在努力使网站更易于阅读。我成功地用背景渐变覆盖了照片，使字母更加清晰可见。问题在于背景渐变不能覆盖整个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/

Answer 1

由于没有在html #us_grid_1中进行设置，因此从CSS中删除了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图片和梯度都使用过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？

2 个答案: