Html 如何使用伪元素使背景图像溢出div

我一直试图使用pseudo元素

：：before

，使我的背景图像溢出其容器，但没有达到我想要的效果

放大或缩小时，我的背景似乎位于左侧，而不是指定的中心位置。我还试着做了

左：40%

，但这会创建一个水平滚动条，我不想要

.hero{
    display:flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

.hero::before{
    content:" ";
    background:url("URL");
    background-size:cover;
    background-repeat: no-repeat;
    background-position:bottom center;
    display:block;
    position: absolute;
    width:100%;
    height: 700px;
    top: -220px;
    z-index: -2;
    padding:100px;
    margin:-100px;
}

---

是否有办法使背景图像在居中时溢出屏幕？

设置

宽度：100%

是一个问题，因为它会将宽度定义为与父元素相同，然后您只需将图像以负边距向左移动即可。宽度中还添加了填充

你可以简单地考虑顶部/左/右/底部如下：

.hero{
宽度：50px；
高度：50px；
利润率：150像素；
边框：5px纯红；
位置：相对位置；
}
英雄：以前{
内容：“；
背景：url（“https://picsum.photos/800/1000");
背景尺寸：封面；
背景重复：无重复；
背景位置：底部中心；
位置：绝对位置；
顶部：-100px；
底部：-100px；
左：-100px；
右：-100px；
z指数：-1；
}

position:relative on the hero？@temaniAfif不起作用：/它只是裁剪了我的背景，我尝试了这个方法，但结果是屏幕上出现了一个水平条，有没有办法在不显示滚动条的情况下做到这一点？@JaeKT

overflow:hidden

on

html

？@JaeKT good，如果答案能解决你的问题，别忘了接受