it-roy-ru.com

Смещение границы над изображением

Я пытаюсь создать именно так, как показано на рисунке ниже. Я пробовал и другие методы, используя метод контура и смещения, но я не мог понять, как это сделать.

 image with an offset border

Вот JSFiddle :

img {
  border: 4px solid green;
}
<img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">

Как мне сделать, чтобы получить эту границу смещения над изображением?

17
Elaine Byene

Оберните изображение встроенным блоком и установите в качестве границы абсолютно позиционированный псевдоэлемент:

body {
  padding: 50px 0 0 80px;
}

.imageContainer {
  display: inline-block;
  position: relative;
}

.imageContainer::before {
  position: absolute;
  top: -5%;
  left: -15%;
  width: 100%;
  height: 100%;
  border: 4px solid #77B244;
  content: '';
}
<div class="imageContainer">
  <img src="https://cdn.pixabay.com/photo/2013/07/31/12/25/cat-169095_960_720.jpg" alt="services_gas_oil" border="0">
</div>

20
Ori Drori

Более простым способом было бы использовать комбинацию границы, контура и отрицательного outline-offset . Вот пример:

img{
  outline:4px solid #77B244;
  outline-offset:-100px;
  border:50px solid transparent;
  border-width:150px 50px 50px 150px;
  margin:-75px 0 0 -75px;
}
<img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">

Это предотвращает использование родительского элемента и псевдоэлемента.

11
web-tiki

Другая возможность заключалась бы в том, чтобы обернуть изображение внутри элемента div, имеющего рамку, и переместить изображение внутри контейнера влево и вниз.

Начиная с Документация :

Относительно позиционированный элемент - это элемент, вычисленное значение position которого равно relative. Свойства top и bottom определяют вертикальное смещение относительно его нормального положения; свойства left и right определяют горизонтальное смещение.

Нам нужно будет обернуть img внутри такого элемента, как div, т.е.

<div class="image-holder">
  <img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" >
</div>

Мы применим border к контейнеру и переместим изображение из его обычного положения с помощью следующего CSS:

.image-holder img {
  position: relative;
  z-index: -1;
  left: 40px;
  top: 40px;
}

.image-holder {
  border: 7px solid #76af46;
  display: inline-block;
  vertical-align: top;
}

.image-holder img {
  position: relative;
  z-index: -1;
  left: 40px;
  top: 40px;
}
<div class="image-holder">
  <img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">
</div>


В качестве альтернативы, мы также можем использовать CSS3 translate().

.image-holder img {
  transform: translate(40px, 40px);
  position: relative;
  z-index: -1;
}

.image-holder {
  border: 7px solid #76af46;
  display: inline-block;
  vertical-align: top;
}

.image-holder img {
  transform: translate(40px, 40px);
  position: relative;
  z-index: -1;
}
<div class="image-holder">
  <img src="https://image.ibb.co/cxwWPa/services_gas_oil.jpg" alt="services_gas_oil" border="0">
</div>

0
Mohammad Usman