Question

我正在创建一个网页，并且对响应式设计非常陌生。我有一个100％长的内容区域框，并且在右侧添加了背景图像以覆盖内容框的整个右半部分。我想在左侧添加文本等。

但是，如果当前将其调整为移动尺寸，由于我当前的背景尺寸为“ 50％”，背景图片会缩小。文字也会与图像重叠。

执行此操作的最佳方法是，我可以在左侧显示文本，在右侧显示图像（完全覆盖内容框且没有空白）

下面是我的基本代码：


<style>
.FirstRow {
  background-image: url("https://miro.medium.com/max/9792/1*-xHF1a7BT8hN8KsHbQCDSw.jpeg"); 
  background-position: right;
  background-color: #f1f1f1;
  background-repeat: no-repeat;
  background-size: 50%;}

.firstrowpad {
  padding-top:0px; 
  height: 50%; 
  padding-bottom:0px;}

.HeaderFont {
  font-size: 2em; 
  left: 15%; 
  top: 15%; 
  position: absolute;}

</style>

<div class="FirstRow firstrowpad">

 <div class="HeaderFont">
    <center>  
     ❝ A dining experience <br>in the comfort of <br>your own home. ❞
     </center>

</div>
</div>

我希望当我缩小到移动设备时，背景图像完全可见而没有滚动条（但较小），并且文本在其下方折叠。

我也不确定这是否是实现我想要的最佳方法，尤其是对于文本，因为我也想使用填充等向文本添加背景色。

谢谢您的帮助。

Jen T

编辑：


@media screen and (max-width: 1024px) { /* Specific to this particular image */
  .FirstRow {
    background-size: 100%;
  }
}

这解决了图像问题，但是如何使文本折叠在下面？

谢谢

响应性背景图片？

0 个答案: