我有2张图片(均为3000像素x 3000像素),我有一张作为背景,一张在它前面(正面会旋转)。
现在的问题是我总是从左上角开始(0px x 0px)......我想从左边开始1500px,从顶部开始1500px(=图像的中心),所以没有溢出:隐藏,你可以看到x / y滚动条居中(垂直/水平)。
有没有办法达到这个效果?
html,
body {
position: relative;
background: url(stripes.jpg) no-repeat;
background-position: center;
margin: 0;
padding: 0;
width: 3000px;
height: 3000px;
overflow: hidden;
}
.stars{
position: absolute;
width: 3000px;
height: 3000px;
border: 2px solid red;
z-index: 99;
background: url(squares.jpg) no-repeat center;
}
这些(坏)图像会让你对想要的效果有所了解
答案 0 :(得分:1)
试试这个:
#container {
position: absolute;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#image {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}