不可能給出具體的值,因?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ī)則集
/* 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>
/* 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>
由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)目:
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> </p><!--still need to factor in your overbar here--> <p> </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>