设置div 四个角设置背景图片

最新推荐文章于 2024-05-07 14:42:27 发布

Q_Q 忙里偷闲

最新推荐文章于 2024-05-07 14:42:27 发布

阅读量5.2k

点赞数 6

分类专栏： # html5&css3 专栏文章标签： html css3 div设置背景图片

本文链接：https://blog.csdn.net/qq_36410795/article/details/103761066

版权

html5&css3 专栏专栏收录该内容

24 篇文章

订阅专栏

本文介绍了一种使用四张PNG背景图片实现的网页布局方法，通过CSS的background-image属性结合no-repeat和position属性，实现了背景图片在页面四个角落的精确放置。此布局方式适用于固定位置的装饰图案或图标展示。

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

`1. 效果图如下`

在这里插入图片描述

`2. 准备四张png背景图片`

在这里插入图片描述

`3. 页面结构和css`

<!-- 常住人口统计 -->
<template>
  <div class="content">
    <div class="main-box">
      <div class="main">
      	....省略
      </div>
    </div>
  </div>
</template>


<style lang='scss' scoped>
.content {
  .main-box {
    height: 434px;
    width: 100%;
    background-image: url("../../assets/bg_images/HFY-Angle-1.png"),
      url("../../assets/bg_images/HFY-Angle-2.png"),
      url("../../assets/bg_images/HFY-Angle-4.png"),
      url("../../assets/bg_images/HFY-Angle-3.png");
    background-repeat: no-repeat, no-repeat, no-repeat, no-repeat;
    background-position: top left, top right, bottom left, bottom right;
    z-index: 1;
    padding: 2px 2px 3px 2px; //设置padding给div往里挤
  }
  .main {
    height: 100%;
    width: 100%;
    border: 2px solid #1723b0;
  }
}
</style>