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

CSS ドロップ キャップ畫像、空白に配置されたテキスト
P粉415632319
P粉415632319 2023-09-05 21:42:04
0
2
701
<p>これは日常的にドロップキャップが発生する狀況ではないと思います。 </p> <p>私の大文字の「S」は次のようなイメージです: </p> <p>実際の畫像は上の欄までとなりますのでご了承ください。上のバーは同じ畫像の一部であり、大きな S と S の左側(cè)の描畫が含まれています。 </strong>ここではわかりやすいように背景を青にしていますが、本來の色は白です。 <em> (ただし、一番上の余分な灰色の領(lǐng)域は無視してください。スクリーン キャプチャを行うときに厄介です。) </em> <strong>トップ バーと畫像を壊したくありません。私に提供された畫像は次のようになります。右上隅にトップバーが描かれ、トップバーの下に空白がある長方形の領(lǐng)域です。 </strong></p> <p>テキストを次のようにしたいとします (paint.net を使用して作成): </p> <p>テキストの最初の行は大文字の「S」の下部に揃えられ、最初の 3 行は畫像の白い領(lǐng)域の上部に配置され、4 行目から 6 行目はページの左揃えに配置されることに注意してください。マージン。 </p> <p>テキストは畫像の白い部分を覆う必要があることにも注意してください。 </p> <p>また、テキストの合計幅は保証できないことにも注意してください。これは EPUB なので、複數(shù)のデバイスで表示できます。したがって、<code>position:absolute</code> は絶対に避けるべきです。 </p> <p>これまでに試した HTML は、関連する CSS をほぼ完全に削除したものです。</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 eiusmodtempor incididunt 労働者と労働者は大規(guī)模なアリクアを持ち、最小限の経済的努力を続け、ウラムコを訓(xùn)練しなければなりません。 Laboris nisi ut aliquip ex ea comodo consequat. Duis aute irure dolor in reprehenderit Voluptate velit エッセンス cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat 自白者ではないが、職務(wù)上の責(zé)任を負(fù)う義務(wù)を負(fù)っていない。</span></pre> <p>ありがとうございます。 </p>
P粉415632319
P粉415632319

全員に返信(2)
P粉458913655

実際の畫像における「S」の位置を測定していないため、具體的な値を示すことはできません。次の畫像は Example A で使用されており、同じ手法が Example B で新しい畫像を OP に追加するために使用されています。

えええええ えええええ
えええええ えええええ

.foreground はフロート表示され、段落のテキストが折り返されます。 .background は、.foreground.background の 150 ピクセルをカバーし、段落テキストが より上になるように、すべてのコンテンツの下に配置されます。背景###。

例でコメントされている重要なルール セット

例A

リーリー リーリー
例B

リーリー リーリー

P粉176980522

OPによる編集: この回答を編集して、私のユースケースに正確に一致するように、私が望むものに非常に近いものにしました。

自動車 S.O. が提案した Web リンクの 1 つ (「vertical-align-text-next-to-an-image」) はアイデアを提供します (また、別のリンク (epub 知識 ))。 投稿した例では、変換変換を使用しています。

電子書籍に関しては、他にも考慮すべき要素があります… 電子書籍ユーザーは、「リフロー可能な」電子書籍のフォント サイズを変更できることに留意してください (これがあなたの目的であると想定されます)。電子書籍リーダーごとに、好みのフォント サイズの設(shè)定が異なる場合があります。この要素も考慮する必要があります。おそらく読者は、さまざまな潛在的なフォント サイズに合わせて一連の @media コマンドを選択するかもしれません。このサンプルは FF、Chrome、Edge でテストされました。

プロジェクトに合わせてさらに準(zhǔn)備を進めるには:

    背景畫像の URL を追加します。
  1. CSS で正確な畫像の幅/高さを設(shè)定します。
  2. 変換変換を希望のレベルに設(shè)定します。
  3. 余分なギャップを埋めるためにテキスト行が畫像の下に移動するように margin-bottom を設(shè)定します。
  4. ニーズに合わせて CSS/HTML で上部の「オーバーバー」を作成します。

リーリー リーリー
最新のダウンロード
詳細(xì)>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート