Блог

Главная - Вопросы по программированию - Как добавить тень изображения

Как добавить тень изображения

#css

#css — код

Вопрос:

Как добавить тень изображения, как в книге, я также добавляю этот css, но он не работает

 img {
  box-shadow: 25px 25px 20px 10px rgb(113 108 108 / 53%);
} 
 <div class="position-relative book_width">
  <div class="overlay mini_book"></div>
  <img src="https://pocketmemories.mojom.co.uk/wp-content/uploads/2020/12/Funeral2.jpg" alt="image">
  <p> Remembering Steve Howell</p>
</div>

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

Комментарии:

1. Где ваши HTML и CSS для проверки вашей проблемы??

2. Взгляните на html-css-js.com/css/generator/box-shadow

Ответ №1:

Вы можете попробовать добавить clip-path с box-shadow 

 img {
  box-shadow: 5px 5px 20px 24px rgb(113 108 108 / 53%);
  margin:50px;
  width:200px;
  clip-path:polygon(0 0,100% 0,200% 100%,200% 200%,100% 200%,0 100%);
}

body {
  background:pink;
} 
 <img src="https://pocketmemories.mojom.co.uk/wp-content/uploads/2020/12/Funeral2.jpg" alt="image">

Также, как показано ниже, с некоторым размытием:

 .box {
  margin: 50px;
  width: 200px;
  position: relative;
}
.box span {
  filter:blur(2px);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}
.box span::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  clip-path: polygon(0 0, 100% 0, 200% 100%, 200% 200%, 100% 200%, 0 100%);
  box-shadow: 5px 5px 20px 24px rgb(113 108 108 / 53%);
  background: rgb(113 108 108 / 53%);
}

img {
  display: block;
  width: 100%;
  position:relative;
  z-index:1;
}

body {
  background: pink;
} 
 <div class="box">
  <img src="https://pocketmemories.mojom.co.uk/wp-content/uploads/2020/12/Funeral2.jpg" alt="image">
  <span></span>
</div>

Ответ №2:

Вы можете попробовать комбинацию box-shadow, как показано ниже:

HTML

 <img src="https://picsum.photos/200">

CSS

 img {
   box-shadow: 4px 4px 4px #999,
   6px 6px 6px #999,
   8px 8px 8px #999,
   10px 10px 10px #999,
   12px 12px 12px #999,
   14px 14px 14px #999;
}

Примечание: Пожалуйста, отрегулируйте значения и цвет в соответствии с вашими требованиями 🙂

Комментарии:

1. Я только что отредактировал его 🙂 Пожалуйста, проверьте один раз 🙂 Возможно, вам потребуется немного скорректировать. Попробуйте несколько комбинаций 🙂

Метки: