CSS 首字下沉圖像，文字在空白部分對齊

Question

我認為這不是日常的 dropcap 情況。

我的大寫字母「S」是這樣的圖片：

請注意，實際影像一直延伸到上欄。頂欄是同一圖像的一部分，其中包含大 S 和 S 左側的圖畫。 我將背景著色為藍色，以便在這裡可以輕鬆看到它，但自然色是白色。 （但請忽略最頂部的額外灰色區域，這是進行螢幕擷取時的笨拙。） 我不想破壞頂欄和影像。提供給我的圖像如圖所示 - 一個矩形區域，右上角繪製了一個頂欄，頂欄下方有空白。

我希望文字看起來像這樣（使用paint.net創建）：

請注意，第一行文字與首字大寫「S」的底部對齊；前三行位於影像中白色區域的頂部，第四到第六行與頁邊距左對齊。

也請注意，文字必須覆蓋影像的白色部分。

也請注意，我無法保證總文字寬度；這將是一個 EPUB，可以在多個裝置上查看。因此絕對應該避免 position:absolute。

這是我迄今為止嘗試過的 HTML，幾乎完全刪除了相關 CSS：

<p class="dropcap-para">
<img width=135 height=108 style="float:left" src="image002.jpg" alt="dropcap S"></img>
<span class="funky-text">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.</span>

謝謝。

Answer 1

不可能給出具體的值，因為沒有測量「S」在實際影像中的位置。以下圖像用於範例 A 中，並在範例 B 中使用相同的技術將新圖像新增至 OP 。

.foreground	.background
Width: 150px Height: 250px	Width: 250px Height: 250px

.foreground 是浮動的，段落的文字環繞在它周圍。 .background 位於所有內容下方，以便 .foreground 覆寫 .background 的 150 個像素，並且段落文字位於 之上。背景。

範例中註解了重要的規則集

範例 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>

範例 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>

Answer 2

由OP編輯： 我已經編輯了這個答案，它非常接近我想要的，以匹配我的確切用例。

其中一個汽車 S.O.建議的網頁連結（「vertical-align-text-next-to-an-image」）提供了想法（以及另一個連結（epub 知識)。
我們發布的這個範例使用了變換翻譯。

談到電子書時，還有其他因素需要考慮... 請記住，電子書使用者可以更改「可重排」電子書中的字體大小（我們認為這是您的目標）。每個電子書閱讀器可能會以不同的方式設定他們喜歡的字體大小。您也需要考慮這個因素。也許讀者可能會選擇一系列針對各種潛在字體大小的 @media 命令。此範例在 FF、Chrome、Edge 中進行了測試。

要進一步準備以適合您的專案：

1. 新增您的背景圖片網址。
2. 在 CSS 中設定準確的圖片寬度/高度。
3. 設定變換翻譯以達到您想要的水平。
4. 設定 margin-bottom，使文字行移動到圖像下方以填滿多餘的間隙。
5. 在 CSS/Html 中建立上部「overbar」以滿足您的需求。

html,
body {
  font-family: Arial, sans-serif;
  font-size: 1em;
  line-height: 1.4;
}

* {
  box-sizing: border-box;
}

.first {
  font-family: Arial, sans-serif;
  font-size: 1em;
  line-height: 1.4;
  margin: 0 0 0 0;
}

.dropcap {
  float: left;
  font-family: Arial, sans-serif;
  font-size: 5em;
  line-height: 1;
  margin-bottom: -0.5em;
  /*-- move margin after moving the image --*/
  margin-right: -0.95em;
  margin-top: -0.1em;

  position: relative;
  /*-- move image up/down --*/
  top: 40%;
  transform: translateY(-40%);
}

.bgi {
  background-image: url("https://i.stack.imgur.com/JlxL1.png");
  z-index: -1;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center center;

  box-sizing: border-box;
  /*-- set image size --*/
  width: 135px;

  height: 108px;
}

<section>
<p>&nbsp;</p><!--still need to factor in your overbar here-->
<p>&nbsp;</p>
<p class="first"><span class="dropcap bgi"></span>HE IS leaving today. orem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices purus quis justo dictum, non varius lacus tempus. Cras id elementum elit. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla. Nullam luctus dapibus nisl sit amet egestas. Ut ac lacus risus. Cras quis accumsan turpis. Duis cursus libero quis laoreet mollis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices purus quis justo dictum, non varius lacus tempus. Cras id elementum elit. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla. Nullam luctus dapibus nisl sit amet egestas. Ut ac lacus risus. Cras quis accumsan turpis. Duis cursus libero quis laoreet mollis. Nullam ultrices purus quis justo dictum, non varius lacus tempus. Cras id elementum elit. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla. Nullam ultrices purus quis justo dictum, non varius lacus tempus. Cras id elementum elit. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla. Nullam ultrices purus quis justo dictum, non varius lacus tempus. Cras id elementum elit. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices purus quis justo dictum, non varius lacus tempus. Cras id elementum elit. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla. Nullam luctus dapibus nisl sit amet egestas. Ut ac lacus risus. Cras quis accumsan turpis. Duis cursus libero quis laoreet mollis.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ultrices purus quis justo dictum, non varius lacus tempus. Cras id elementum elit. Quisque dolor arcu, venenatis ut fringilla ut, sodales in nulla. Nullam luctus dapibus nisl sit amet egestas. Ut ac lacus risus. Cras quis accumsan turpis. Duis cursus libero quis laoreet mollis.</p>
</section>