使用图像作为具有填充高度的居中卡片的背景

Posted 2023-02-23

【中文标题】使用图像作为具有填充高度的居中卡片的背景

【英文标题】：use image as background for centered card with fill height

【发布时间】：2020-07-29 11:24:34

【问题描述】：

我想要一个容器填充高度（屏幕高度）。在那个容器的中心，我想要一张带有一些文字的卡片。容器本身应该有背景图片。

所以我当前使用的代码是

<div id="app">
  <v-app id="inspire">
    <v-content>
      <v-container fluid fill-height>
        <!--
        <v-img 
               src="https://images.pexels.com/photos/18104/pexels-photo.jpg?auto=compress&cs=tinysrgb&dpr=2&h=750&w=1260"
               gradient="to top right, rgba(100,115,201,.5), rgba(25,32,72,.8)"
          >
          -->
          <v-layout align-center justify-center>
              <v-card flat color="transparent">
                <v-card-title class="justify-center white--text display-2 font-weight-medium">
                  Title goes here
                </v-card-title>
                <v-card-subtitle class="text-center white--text display-1">
                  Subtitle goes here
                </v-card-subtitle>
              </v-card>
          </v-layout>
        <!-- </v-img> -->
      </v-container>
      <h1>header below screen height</h1>
    </v-content>
  </v-app>
</div>

如果您在图像中添加注释，html 将中断并且卡片不再居中。我创建了一个 Codepen 用于复制

https://codepen.io/trilliogus/pen/oNjbQMK?editors=1010

有人介意帮我实现所需的布局吗？

【参考方案1】：

PEN LINK

说明：如果您有一个带有position:relative 的div，那么所有带有position:absolute 的子div 将与top:0;left:0; 堆叠在一起。

<div id="app">
  <v-app id="inspire" flex>
    <v-content>
      <v-container fluid class="ma-n1 pa-0">
        <v-row no-gutters>
          <v-col>
            <div style="height:100vh;
                        position: relative;
                        overflow:hidden;"
              >
               <div style="position:absolute;height:100vh;width:100vw;">
                <v-img 
                  src="https://picsum.photos/800/800"
                  
                  aspect-ratio="1.7"
                  cover
                ></v-img>
               </div>
               <div style="position:absolute;height:100vh;width:100vw;">
                <v-container fluid fill-height>
                  <v-row>
                    <v-col align="center">
                      <v-card flat color="transparent">
                        <v-card-title 
                            class="justify-center 
                                   white--text 
                                   display-2 font-weight-medium"
                        >
                        Title goes here
                        </v-card-title>
                        <v-card-subtitle
                            class="text-center 
                            white--text display-1">
                        Subtitle goes here
                        </v-card-subtitle>
                      </v-card>
                    <v-col>
                  </v-row>
                </v-container>
              </div>
            </div>
          </v-col>
        </v-row>
      </v-container>
    </v-content>
  </v-app>
</div>