css - 对于有背景图片的 的响应式布局 怎么来写

问题描述

问 题

类似这种 我现在想要做一个component 有背景图 但是背景图不能百分百大小 然后中间还要有内容 左边图片 右边文字 如何来做响应式

<div class="container-fluid">
  <div class="fuc_content_bg fuc_invoice_bg ">
    <div class="row">
        <div class="col-xs-6 col-sm-6 col-md-6 fun_banner_trip">
          <img src="./imgs/function/function_shaomiao.png" alt="">
        </div>
        <div class="col-xs-6 col-sm-6 col-md-6 banner_content_title">
          <h2>发票识别</h2>
          <span>扫描电子发票左上角二维码，系统返回税务系统发票查询信息。</span>
          <span>企业可以留存完整的发票信息，实现发票自动查重验真。同时支持电子发票及纸质发票的二维码扫描。</span>
        </div>
    </div>
  </div>
</div>

.fuc_content_bg {
  width: 100%;
  height: 100vh;
  border: 1px solid red;
  color: #fff;
  /*overflow: hidden;*/
}

.fuc_invoice_bg {
  background: url('../imgs/function/function_shaomiao_bg.jpg') no-repeat center center;
  background-size: auto 100%;
}

.fun_banner_trip img {
    width:60%;
    margin-top: 28%;
    margin-left: 30%;
}

.banner_content_title {
  margin: 12% auto;
}

.banner_content_title span {
  width: 60%;
  word-wrap: break-word;
  text-align: left;
}

解决方案

你可以仔细研究下 Apple 的一些页面，它的一些页面就是使用了背景图片且自适应的 —— 当然，它的布局也相对简单。它的原理是就是 CSS3 Media Query。

我平时会用到 2 种方案：

• 12 列栅格布局系统（宽度、浮动、顺序响应）；

• Media Query 适配（使用 position 属性或 flex 布局、字号、适配的省流图片）；

如果是组件开发的话，你仍可以使用 props 来定义好行内参数，然后 component 内部判断排版样式（预设几种版式）；

对于背景图片，你可以使用 background-size 或 background-position: center center 属性来实现图片自适应显示（自动填充），也可以使用 Media Query 指定不同的设备上显示的不同（如：desktop 图片宽大于高、mobile 竖屏图片高大于宽）图片（节省流量）。

我觉得：尽量不要用背景来作为内容版式的一部分，除非设计师给你提供了足够的图片适配尺寸和方案！

---

这篇关于css - 对于有背景图片的 的响应式布局 怎么来写的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！