vue 设置固定背景图片

最新推荐文章于 2025-02-10 00:27:41 发布

金戈_旭日东升

最新推荐文章于 2025-02-10 00:27:41 发布

阅读量1.9k

点赞数 1

分类专栏： VUE 前端

本文链接：https://blog.csdn.net/fang156239305/article/details/112938006

版权

VUE 前端专栏收录该内容

22 篇文章

订阅专栏

这篇博客展示了如何使用HTML和CSS进行网页布局设计。主要内容包括一个名为'helloWorld'的div元素，背景设置为固定且不可重复的图片，以及一个内容区域。内容区域采用flex布局，确保内容居中显示。此外，还涉及了CSS的溢出处理和定位属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>

  <div id="helloWorld">
    <div class="content">
           hello World
    </div>
</div>
</template>

#helloWorld{
  background-image:url('../../assets/uni_backgroud_pic.png');
  background-repeat: no-repeat;
/*  z-index:1; */
  position: fixed;
  width: 100%;
  height: 100vh;
  overflow: auto;

}
.content{
  width: 100%;
  overflow: auto;
  display: flex;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  /* z-index:2; */
}