找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索
热搜: 文档 工具 设计
查看: 181|回复: 0

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

[复制链接]

2万

主题

1249

回帖

2万

积分

超级版主

教育辅助界扛把子

附加身份标识
精华
1
热心
7
听众
1
威望
48
贡献
14329
违规
0
书币
50008
注册时间
2020-4-8

论坛元老灌水之王

发表于 2020-5-24 23:36 | 显示全部楼层 |阅读模式
1. 效果图如下
20191230092554455.png

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

3. 页面结构和css
[HTML] 纯文本查看 复制代码
<!-- 常住人口统计 -->
<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>
Great works are not done by strength, but by persistence! 历尽艰辛的飞升者,成了围剿孙悟空的十万天兵之一。
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则 需要先绑定手机号


免责声明:
本站所发布的第三方软件及资源(包括但不仅限于文字/图片/音频/视频等仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络,版权争议与本站无关。您必须在下载后的24个小时之内,从您的电脑中彻底删除上述内容。如果您喜欢某程序或某个资源,请支持正版软件及版权方利益,注册或购买,得到更好的正版服务。如有侵权请邮件与我们联系处理。

Mail To: admin@cdsy.xyz

QQ|Archiver|手机版|小黑屋|城东书院 ( 湘ICP备19021508号-1|湘公网安备 43102202000103号 )

GMT+8, 2024-11-23 16:04 , Processed in 0.052957 second(s), 30 queries .

Powered by Discuz! CDSY.XYZ

Copyright © 2019-2023, Tencent Cloud.

快速回复 返回顶部 返回列表