当图像仅使用css显示时,我试图将图像仅使用css居中。
@media(max-width: 768px){
.page-id-28 {
background-image: url(http://4309.co.uk/wp-content/uploads/2019/10/IMG_2019107_1853-1.jpg) !important;
background-size: 890px !important;
}
}
尝试使用url(foo) center;
没有用。
使用
@media(max-width: 768px){
.page-id-28 {
background-image: url(http://4309.co.uk/wp-content/uploads/2019/10/IMG_2019107_1853-1.jpg) !important;
background-size: 890px !important;
background-position: center;
}
}
background-position
可以是center center
或50% 50%
(即,水平/垂直的值可以不同)。您还需要no-repeat
。在下面的代码段中,我使用了较小的图像尺寸以使其适合此处的可用空间:
body {
background-image: url(https://placehold.it/400x180/fb8);
background-size: 400px;
background-position: 50% 50%;
background-repeat: no-repeat;
}
html,
body {
margin: 0;
height: 100%;
}