.foreground

.background

Width: 150px Height: 250px

Width: 250px Height: 250px

.foreground 是浮动的，段落的文本环绕在它周围。 .background 位于所有内容下方，以便 .foreground 覆盖 .background 的 150 像素，并且段落文本位于 之上。背景.

Ensembles de règles importantes annotées dans les exemples

Exemple A

/*
The font-size on html or :root will be default size for 1rem. 
The values will vary with font-size (2.25ch), font-family, and 
dimensions of image.
*/

html {
  font: 2.25ch/2 "Segoe UI" /* 2 line-height for line spacing */;
}

article {
  margin-top: -250px /* Moves it up the height of the image */;
}

img {
  display: block /* Makes all tags behave uniformly first */;
}

.foreground {
  float: left /* This image sits on top of .background */;
}

.background {
  position: relative /* Takes image out of the normal "flow" */;
  top: 250px /* Moves it down the height of .foreground */;
  z-index: -1 /* Moves it below everything on the z axis */;
}

p {
  padding-top: 135px /* Moves it down so the first line is aligned to "S" */;
}

<article>
  <!-- 250x250px jpg -->
  <img src="https://i.ibb.co/k3hS6rP/sy.jpg" class="background">
  <!-- 150x250px jpg -->
  <img src="https://i.ibb.co/Fs0xtNb/s.jpg" class="foreground">
  <p>HE ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>

Exemple B

/*
The font-size on html or :root will be default size for 1rem. 
The values will vary with font-size (2.55ch), font-family, and 
dimensions of image.
*/

html {
  font: 2.55ch/1.6 "Segoe UI" /* 1.6 line-height for line spacing */;
}

article {
  margin-top: -12.3rem /* Moves it up the height of the image */;
}

img {
  display: block /* Makes all tags behave uniformly first */;
}

.foreground {
  float: left /* This image sits on top of .background */;
  margin-top: 2.5rem;
}

.background {
  position: relative /* Takes image out of the normal "flow" */;
  top: 12.3rem /* Moves it down the height of .foreground */;
  z-index: -1 /* Moves it below everything on the z axis */;
}

p {
  padding-top: 6.6rem /* Moves it down so the first line is aligned to "S" */;
}

<article>
  <!-- 250x250px jpg -->
  <img src="https://i.ibb.co/dmj8s0J/background.png" class="background">
  <!-- 150x250px jpg -->
  <img src="https://i.ibb.co/gWqt8s4/foreground.png
" class="foreground">
  <p>HE ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
    in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</article>