![](/img/trans.png)
[英]How to add an image as a text background using CSS pseudo element (:after)
[英]How to get background image to overflow out of div using pseudo element
我一直在尝试使用伪元素::before
背景图片从其容器中溢出 ,但是没有达到我想要的效果。
放大或缩小时,我的背景似乎偏向左侧而不是指定的中心。 我也尝试做left: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;
}
有没有办法使居中的背景图像从屏幕上溢出?
设置width:100%
是一个问题,因为它将宽度定义为与父元素相同,然后您只需将图像的负边界向左移动即可。 宽度上也添加了填充。
相反,您可以像下面这样简单地考虑上/左/右/下:
.hero{ width:50px; height:50px; margin:150px; border:5px solid red; position:relative; } .hero::before{ content:" "; background:url("https://picsum.photos/800/1000"); background-size:cover; background-repeat: no-repeat; background-position:bottom center; position: absolute; top: -100px; bottom:-100px; left:-100px; right:-100px; z-index: -1; }
<div class="hero"> </div>
只需使顶部与底部相同,并与右侧相同,即可使背景居中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.