Heim  >  Fragen und Antworten  >  Hauptteil

css – So schreiben Sie ein responsives Layout mit Hintergrundbildern

Ähnlich möchte ich eine Komponente mit einem Hintergrundbild erstellen, aber das Hintergrundbild kann nicht 100 % groß sein. Dann muss sich in der Mitte ein Bild befinden reaktionsschnell

怪我咯怪我咯2683 Tage vor2080

Antworte allen(3)Ich werde antworten

  • ringa_lee

    ringa_lee2017-07-06 10:39:20

    试试 background-size: cover;

    Antwort
    0
  • phpcn_u1582

    phpcn_u15822017-07-06 10:39:20

    background-position,和background-size配合使用,试过没

    Antwort
    0
  • 大家讲道理

    大家讲道理2017-07-06 10:39:20

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

    我平时会用到 2 种方案:

    • 12 列栅格布局系统(宽度、浮动、顺序响应);

    • Media Query 适配(使用 position 属性或 flex 布局、字号、适配的省流图片);

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

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

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

    Antwort
    0
  • StornierenAntwort