Блог

У меня есть div, у которого есть изображение в качестве фонового изображения, мне нужно установить линейную градиентную рамку-тень, но он не может получить два фоновых изображения. Мне нужно что-то вроде изображения ниже

мой HTML-код:

 <div class="top-container"></div>
  

css:

  .top-container {
    position: relative;
    min-height: 632px;
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    padding-top: 25px;
    background-image: url("/assets/images/homepage-images/header-desk-bg-img.jpg");

  }
  

Мне нужна просто градиентная тень сверху вниз от изображения ниже

Вы можете сделать это, добавив box-shadow свойство.

Я не знаю, какие значения вы должны ему присвоить, но это отличный инструмент, в котором вы можете поиграть со box-shadow значениями, чтобы настроить его так, как вам больше всего нравится. https://www.cssmatic.com/box-shadow

Итак, к концу вашей попытки вы получите что-то вроде этого:

  .top-container {
    position: relative;
    min-height: 632px;
    background-position: bottom;
    background-size: cover;
    background-repeat: no-repeat;
    width: 100%;
    height: auto;
    padding-top: 25px;
    background-image: url("/assets/images/homepage-images/header-desk-bg-img.jpg");
    box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.75);
  }
  

Вы можете использовать ::after , если хотите применить linear-gradient .

 .top-container{
  width: 50px;
  height: 50px;
  margin: 20px;
  background: cyan;
}

.top-container::after{
  position: absolute;
  content: '';
  display: block;
  width: 50px;
  margin-top: 50px;
  height: 10px;
  background: linear-gradient(to bottom, #ccc, transparent);;
}  

 <div class='top-container'></div>  

Свойство CSS box-shadow также может выполнить эту работу.

 .top-container{
  width: 50px;
  height: 50px;
  margin: 20px;
  background: cyan;
  box-shadow: 0 0 10px grey;
}  

 <div class='top-container'></div>