Question

http://lucasdebelder.be/stack/index.html

确保以1680像素的宽度检查它，然后它完美地对齐在一起但是如果我使我的屏幕的宽度变大或变小，它就不再对齐任何想法如何解决这个问题？

我正在尝试重新创建Dribbble shot。

代码片段。

＆＃13;

.wrapper {
    position: absolute;
    top: 50%;
    left: 50%;
    height: 80%;
    width: 80%;
    transform: translate(-50%,-50%);
    
    background: #F1F1F1;
    box-shadow: 0 0 90px 0 rgba(0,0,0,0.45);
    border-radius: 15px;
    
    background-image: url("http://svgur.com/i/3W7.svg");
    background-position: 129% 38%;
    background-repeat: no-repeat;
    background-size: 752px;
    
}
#section0 {
    background-image: url("http://svgur.com/i/3W7.svg");
    background-position: 100% 0%;
    background-repeat: no-repeat;
    background-size:  750px;
}

＆＃13;

<section class="wrapper">
            <h1>TEST</h1>
            </section>

＆＃13;

编辑：很难在一个小小的jsfiddle中重新创建它，记住这一点，然后你就可以看到代码了。

Answer 1

您的代码段似乎有点破碎，但我可以使用单位vw为您的背景位置产生所需的效果，这取决于视口宽度。

#section0 {
background-image: url(../img/1/bol.svg), url(../img/1/vlekBG.svg);
background-position: 0vw bottom, 61vw;
background-repeat: no-repeat;
background-size: auto, 750px;
}


.wrapper {
position: absolute;
top: 50%;
left: 50%;
height: 80%;
width: 80%;
transform: translate(-50%,-50%);
background: #F1F1F1;
box-shadow: 0 0 90px 0 rgba(0,0,0,0.45);
border-radius: 15px;
background-image: url(../img/1/vlekBG.svg);
background-position: 51vw;
background-repeat: no-repeat;
background-size: 752px;

这些是我在开发人员工具中所做的更改，并且图像保持对齐，与视口宽度无关。

编辑：稍微更改了代码，因为我没有意识到#section0

中有两个背景图片

背景-img对齐响应？

1 个答案: