通过css显示时居中图像

问题描述 投票:0回答:2

当图像仅使用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;

没有用。

html css
2个回答
0
投票

使用

@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;
  }
}

0
投票

background-position可以是center center50% 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%;
}
© www.soinside.com 2019 - 2024. All rights reserved.