background简写方式图片铺满元素的几种写法

Myth丶恋晨 2022-02-15 11:15 312阅读 0赞

示例图片在这里插入图片描述
一、裁剪铺满背景,不拉伸图片形状。不要求全部展示图片的可以使用

  1. <style> .bg{ position: absolute; top: 0; left: 0; bottom: 0; right: 0; background: url("bg-test.jpg") no-repeat center/cover; } </style>
  2. <div class="bg"></div>
  3. </body>

网页实际效果：
在这里插入图片描述

二、不裁剪铺满背景,不拉伸图片形状, 图片规格和屏幕一致可以使用这种方式

  1. background: url("bg-test.jpg") no-repeat center/contain;

在这里插入图片描述

三、不裁剪铺满背景, 拉伸图片形状。让整个图片全部填满元素

  1. background: url("bg-test.jpg") no-repeat center/100% 100%;

在这里插入图片描述

发表评论

表情：
评论列表 （有 0 条评论，312人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Vue显示图片的几种方式

    前言 最近在做自己的项目，有这么一个需求，用户列表需要展示用户的头像，之前一直没有处理，趁着这次机会，正好分享下我的解决过程。 头像这一栏空荡荡的，我这种强迫症患者难受

    心已赠人心已赠人/ 0 赞/ 163 阅读