0
<html lang="en">

<head>
   <style>
      img {
         border-top: 100px solid green;
      }
   </style>
</head>

<body>
   <img src="https://cdn.britannica.com/45/5645-050-B9EC0205/head-treasure-flower-disk-flowers-inflorescence-ray.jpg"
      alt="">

</body>

</html>

результат, который выходит

а мне нужно, чтобы border наложился на нее

нужный результат

я пробовал добавить через outline, но ничего не получилось

2 ответа 2

0

В таком виде, как у вас в HTML, пожалуй никак. Но если обернуть изображение каким-нибудь <div>, то самым простым способом будет:

.wrap-image {
  border-top: 100px solid green;
  display: inline-block;
  overflow: hidden;
}
img {
  margin-top: -100px;
}
<div class="wrap-image">
  <img src="https://cdn.britannica.com/45/5645-050-B9EC0205/head-treasure-flower-disk-flowers-inflorescence-ray.jpg"  alt="">
</div>

UPD: запоздалая мысль вдогонку (. Гораздо эффектнее и правильнее было бы обернуть <img> при помощи <figure> что позволит нам в CSS избавиться от правила display: inline-block;

<figure class="wrap-image">
    <img src="https://cdn.britannica.com/45/5645-050-B9EC0205/head-treasure-flower-disk-flowers-inflorescence-ray.jpg"  alt="">
</figure>
0

попробуйте outline, но к сожалению его нельзя задать на конкретную сторону. А border это граница и она не ляжет на картинку. Можно попробовать через тень. Или заморочиться блоком div с отрицательным margin.

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.