webentwicklung-frage-antwort-db.com.de

Versetzen Sie einen Rand über ein Bild

Ich versuche genau das zu schaffen, was auf dem Bild unten gezeigt wird. Ich habe auch andere Methoden mit Umriss- und Versatzmethode ausprobiert, aber ich konnte nicht herausfinden, wie ich das machen soll.

 image with an offset border

Hier ist das JSFiddle :

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

Wie gehe ich vor, um diesen versetzten Rand über das Bild zu bekommen?

17
Elaine Byene

Wickeln Sie das Bild mit einem Inline-Block und setzen Sie ein absolut positioniertes Pseudoelement als Rand:

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

Ein einfacherer Weg wäre die Verwendung einer Kombination aus Rand, Umriss und einem negativen Umrissversatz . Hier ist ein Beispiel :

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">

Dies verhindert die Verwendung eines übergeordneten Elements und eines Pseudoelements.

11
web-tiki

Eine andere Möglichkeit wäre, ein Bild in ein div -Element mit einer Umrandung zu packen und das Bild innerhalb des Containers nach links und unten zu verschieben.

Ab Dokumentation :

Ein relativ positioniertes Element ist ein Element, dessen berechneter position-Wert relative ist. Die Eigenschaften top und bottom geben den vertikalen Versatz von seiner normalen Position an. Die Eigenschaften left und right geben den horizontalen Versatz an.

Wir müssen img in ein Element wie div einwickeln, d. H .:

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

Wir werden border auf den Container anwenden und das Bild mit folgendem CSS von seiner normalen Position verschieben:

.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>


Alternativ können wir auch CSS3 translate() verwenden.

.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