Html 如何在页面加载时使图像居中
我有两个图像(都是3000px 3000px),一个作为背景,一个在前面(前面的一个会旋转) 现在的问题是,我总是从左上角(0px x 0px)开始…我想从左上角1500px开始,从顶部开始1500px(=图像的中心),所以没有溢出:隐藏,您可以看到居中(垂直/水平)的x/y滚动条 有没有办法达到这个效果Html 如何在页面加载时使图像居中,html,css,image,Html,Css,Image,我有两个图像(都是3000px 3000px),一个作为背景,一个在前面(前面的一个会旋转) 现在的问题是,我总是从左上角(0px x 0px)开始…我想从左上角1500px开始,从顶部开始1500px(=图像的中心),所以没有溢出:隐藏,您可以看到居中(垂直/水平)的x/y滚动条 有没有办法达到这个效果 html, body { position: relative; background: url(stripes.jpg) no-repeat; background-
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;
}
这些(糟糕的)图像会让你对想要的效果有一些了解
试试这个:
#container {
position: absolute;
width: 100vw;
height: 100vh;
overflow: hidden;
}
#image {
position: absolute;
left: 50%;
top: 50%;
transform: translateX(-50%) translateY(-50%);
}
你真的需要那个大图像吗?若你们真的给左边1500像素的边距/边距,那个么它不会显示在正常屏幕的中央。