如何设置全屏背景图像？

Posted 2021-04-10

我设法在桌面上将背景图像调整到全屏，但在移动设备上它会在底部留下一些空间。

找到css here。

* {
  padding: 0;
  margin: 0
}

body {
  background-color: #000000;
}

.crossfade > figure {
  animation-name: imageAnimation;
  animation-duration: 20s;
  animation-timing-function: linear;
  animation-delay: 0s;
  animation-iteration-count: infinite;
  backface-visibility: hidden;
  background-size: cover;
  background-position: center center;
  color: transparent;
  height: 100%;
  left: 0px;
  opacity: 0;
  position: static;
  top: 0px;
  width: 100%;
  z-index: 0;
}

.crossfade > figure:nth-child(1) {
  background-image: url('../Pictures/IMG_5956.JPG');
}
.crossfade > figure:nth-child(2) {
  animation-delay: 10s;
  background-image: url('../Pictures/IMG_3497.JPG');
}
.crossfade > figure:nth-child(3) {
  animation-delay: 20s;
  background-image: url('../Pictures/IMG_2548.JPG');
}
.crossfade > figure:nth-child(4) {
  animation-delay: 30s;
  background-image: url('../Pictures/IMG_1251.JPG');
}
.crossfade > figure:nth-child(5) {
  animation-delay: 40s;
  background-image: url('../Pictures/IMG_0429.JPG');
}

@keyframes imageAnimation {
  0% {
    animation-timing-function: ease-in;
    opacity: 0;
  }
  8% {
    animation-timing-function: ease-out;
    opacity: 0.3;
  }
  17% {
    opacity: 1
  }
  25% {
    opacity: 1
  }
  100% {
    opacity: 1
  }
}


.header{
position: relative; 
z-index: 1000; 
padding-top: 70px; 
padding-bottom: 50px; 
padding-left: 50px; 
padding-right: 50px;
}

.quote{
position: relative; 
z-index: 1000; 
padding-bottom: 50px; 
padding-left: 50px; 
padding-right: 50px;
}


.icons{
position:relative;
bottom: 0;
margin: auto;
padding-bottom: 20px; 
width: 100%;
text-align: center;
}

答案

适用于移动媒体。将高度设置为100％并固定背景位置。

.crossfade > figure {
    background: url(image url) no-repeat center center fixed;
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    height: 100%;
    overflow: hidden;
}

另一答案

<style type="text/css">
   html { 
      background: url(images/bd.jpg) no-repeat center center fixed; 
      background-size: cover;
   }
</style>

此背景大小用于将背景图像设置为chrome中的全屏。

  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;

用于其他浏览器，如IE，Firefox，Opera

另一答案

[https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_full_page][1]

使用以上链接

 background-position: center;
 background-repeat: no-repeat;
 background-size: cover;