Как я могу сделать свой градиентный фон покрывающим весь div? - PullRequest
Новая
       50

Как я могу сделать свой градиентный фон покрывающим весь div?

0 голосов
/ 11 октября 2018

Я работаю над тем, чтобы сделать сайт лучше читаемым.Мне удалось покрыть мои фотографии градиентами фона, чтобы сделать буквы более заметными.Проблема в том, что градиент фона не покрывает весь 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/

Ответы [ 2 ]

0 голосов
/ 11 октября 2018

Также, вы можете следить за этим 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>
0 голосов
/ 11 октября 2018

Удалить #us_grid_1 из css, потому что вы не установили в html id=us_grid_1

Узнайте о селекторе в 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>
...