css背景图居中

<style>
div{
     background-image: url(../images/about-banner.webp);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-attachment: scroll;
    min-height: 400px;
    display: flex;
}
</style>

<div></div>

  • background-image: url(../images/about-banner.webp);: 这行代码指定了一个背景图片,图片的路径是相对于当前HTML文件的。图片文件名为about-banner.webp,存储在images文件夹中。

  • background-size: cover;: 这一行设置背景图片的大小,使图片按比例缩放,以完全覆盖<div>的整个背景区域。图片可能会被裁剪,但不会变形。

  • background-repeat: no-repeat;: 这行代码阻止背景图片在<div>的背景区域内重复。即使背景区域比图片大,也只显示一张图片。

  • background-position: center;: 这行代码将背景图片在<div>内居中显示。无论<div>的大小如何,图片都将从中间开始显示。

  • background-attachment: scroll;: 这行代码规定背景图片随着页面内容的滚动而移动。这是背景图片的默认行为。

  • min-height: 400px;: 这行代码设置了<div>元素的最小高度为400像素。即使没有内容,<div>的高度也至少会是400像素。

  • display: flex;: 这行代码将<div>的显示模式设置为flex,使它能够成为一个弹性盒子容器,允许子元素在其中灵活排列。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

永远的WEB小白

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值