国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

CSS-Drop-Cap-Bild, Text im Leerraum ausgerichtet
P粉415632319
P粉415632319 2023-09-05 21:42:04
0
2
703
<p>Ich glaube nicht, dass dies eine allt?gliche Dropcap-Situation ist. </p> <p>Mein gro?es ?S“ ist ein Bild wie dieses: </p> <p>Bitte beachten Sie, dass das eigentliche Bild bis zur oberen Spalte reicht. Die obere Leiste ist <strong>Teil desselben Bildes und enth?lt das gro?e S und die Zeichnung links vom S. </strong>Ich habe den Hintergrund blau eingef?rbt, damit er hier gut sichtbar ist, aber die natürliche Farbe ist wei?. <em> (Aber bitte ignorieren Sie den zus?tzlichen grauen Bereich ganz oben, das ist bei Screenshots umst?ndlich.) </em>Ich m?chte die obere Leiste und das Bild nicht besch?digen. Das mir zur Verfügung gestellte Bild sieht folgenderma?en aus: ein rechteckiger Bereich mit einer oberen Leiste in der oberen rechten Ecke und einem wei?en Raum unter der oberen Leiste. </strong></p> <p>Ich m?chte, dass der Text so aussieht (erstellt mit paint.net): </p> <p>Beachten Sie, dass die erste Textzeile am unteren Rand des gro?en ?S“ ausgerichtet ist; die ersten drei Zeilen befinden sich oben im wei?en Bereich im Bild und die Zeilen vier bis sechs sind linksbündig an der Seite ausgerichtet Marge. </p> <p>Beachten Sie au?erdem, dass <strong>der Text den wei?en Teil des Bildes abdecken muss</strong>. </p> <p>Beachten Sie au?erdem, dass ich nicht garantieren kann, dass es sich hierbei um eine EPUB-Datei handelt, die auf mehreren Ger?ten angezeigt werden kann. Daher sollte <code>position:absolute</code> unbedingt vermieden werden. </p> <p>Hier ist der HTML-Code, den ich bisher ausprobiert habe, wobei das relevante CSS fast vollst?ndig entfernt wurde: </p> <pre class="brush:php;toolbar:false;"><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 laboure et dolore magna aliqua. Laboris ut aliquip ex ea consequat consequat Voluptate velit essential cillum dolore eu fugiat nulla pariatur nicht proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</span></pre> <p>Vielen Dank. </p>
P粉415632319
P粉415632319

Antworte allen(2)
P粉458913655

不可能給出具體的值,因?yàn)闆]有測量“S”在實(shí)際圖像中的位置。以下圖像用于示例 A 中,并且在示例 B 中使用相同的技術(shù)將新圖像添加到 OP 中。

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

.foreground 是浮動的,段落的文本環(huán)繞在它周圍。 .background 位于所有內(nèi)容下方,以便 .foreground 覆蓋 .background 的 150 像素,并且段落文本位于 之上。背景。

示例中注釋了重要的規(guī)則集

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

P粉176980522

由OP編輯: 我已經(jīng)編輯了這個答案,它非常接近我想要的,以匹配我的確切用例。

其中一個汽車 S.O.建議的網(wǎng)絡(luò)鏈接(“vertical-align-text-next-to-an-image”)提供了想法(以及另一個鏈接(epub 知識)。
我們發(fā)布的這個示例使用了變換翻譯。

談到電子書時,還有其他因素需要考慮...... 請記住,電子書用戶可以更改“可重排”電子書中的字體大?。ㄎ覀冋J(rèn)為這是您的目標(biāo))。每個電子書閱讀器可能會以不同的方式設(shè)置他們喜歡的字體大小。您也需要考慮這個因素。也許讀者可能會選擇一系列針對各種潛在字體大小的 @media 命令。此示例在 FF、Chrome、Edge 中進(jìn)行了測試。

要進(jìn)一步準(zhǔn)備以適合您的項(xiàng)目:

  1. 添加您的背景圖片網(wǎng)址。
  2. 在 CSS 中設(shè)置準(zhǔn)確的圖像寬度/高度。
  3. 設(shè)置變換翻譯以達(dá)到您想要的水平。
  4. 設(shè)置 margin-bottom,使文本行移動到圖像下方以填充多余的間隙。
  5. 在 CSS/Html 中構(gòu)建上部“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>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage