我有以下 HTML/CSS 代碼，用于在全角背景影像上并排顯示影像和文本塊。
<section style="position: static; background-color: black; margin: 0; padding: 0; width: 100%; background-image: url("background.jpg"); background-repeat: no-repeat; background-size: 100%;">
<img style="float: left; width: 50%; margin: 1%;" src="overlay-image.jpg" alt="Image overlaid on background image.">
<p style="color:white;">Text overlaid on background image.</p>
<section>
問題是，只有被文本覆寫的背景影像的頂部顯示。
是否可以使背景影像顯示其垂直部分與疊加影像高度一樣多？
我試過“背景尺寸：封面”。在 Google Chrome 版本 107.0.5304.88 (Official Build) (64-bit) 和 Mozilla FireFox 106.0.5 (64-bit) 中，結果同上；僅顯示被文本覆寫的背景影像部分，而不是影像。
uj5u.com熱心網友回復：
您正在使用浮動并且浮動元素不會添加到容器/父元素的高度，因此您的部分背景取決于您的 p 標簽高度，或者向部分添加靜態高度或洗掉浮動屬性并改用flexbox。
uj5u.com熱心網友回復：
使用@18jad 給出的答案，我測驗了以下代碼。
<section style="position: static; background-color: black; margin: 0; padding: 0; width: 100%; background-image: url("background.jpg"); background-repeat: no-repeat; background-size: 100%; display: flex;">
<img style="flex: 50%; margin: 1%;" src="overlay-image.jpg" alt="Image overlaid on background image.">
<div style="flex: 50%; text-align: left; margin: 1%;">
<p style="color:white;">Text overlaid on background image.</p>
</div>
<section>
它可以按需要作業：顯示整個背景影像！感謝@18jad！
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/530751.html
標籤：htmlcss
上一篇：如何使下拉選單項的寬度與按鈕對齊-（導航欄下拉選單）
下一篇：設定背景影像不顯示在子div上