Question

嗨，这是我第一次从头开始制作一个网站，我试图让我的网站改变背景图片，而不是实际的背景图像（因为我不知道如何）

问题是我无法将文字显示在图像的ONTOP上，我已经尝试过所有GOOGLE.COM已将我链接到。

如何将图像放在背面到目前为止自动显示在其上的位置，同时将图像保持在中心位置？

HTML代码

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="Script Tutorials" />
        <title>Home</title>
        <link href="css/background.css" rel="stylesheet" type="text/css" />
    </head>

    <body>

<p>This is the content for Layout P Tag</p>

    <img src="4.jpg" style= "height: 100%; width: 100%" align="absbottom">
    <img src="3.jpg" style= "height: 100%; width: 100%" align="absbottom">
    <img src="2.jpg" style= "height: 100%; width: 100%" align="absbottom">
    <img src="1.jpg" style= "height: 100%; width: 100%" align="absbottom">

    </body>
</html>

CSS代码

body img {
  position:absolute;
  max-width: auto;
   height: auto;
}

.radio {
    position:absolute;
}

@-webkit-keyframes imgFade {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-moz-keyframes imgFade {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-o-keyframes imgFade {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@keyframes imgFade {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

body img {

    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;

  -webkit-animation-name: imgFade;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 64s;

  -moz-animation-name: imgFade;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 64s;

  -o-animation-name: imgFade;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 64s;

  animation-name: imgFade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 64s;
}
body img:nth-of-type(1) {
  -webkit-animation-delay: 48s;
  -moz-animation-delay: 48s;
  -o-animation-delay: 48s;
  animation-delay: 48s;
}
body img:nth-of-type(2) {
  -webkit-animation-delay: 32s;
  -moz-animation-delay: 32s;
  -o-animation-delay: 32s;
  animation-delay: 32s;
}
body img:nth-of-type(3) {
  -webkit-animation-delay: 16s;
  -moz-animation-delay: 16s;
  -o-animation-delay: 16s;
  animation-delay: 16s;
}
body img:nth-of-type(4) {
  -webkit-animation-delay: 8;
  -moz-animation-delay: 8;
  -o-animation-delay: 8;
  animation-delay: 8;
}

Answer 1

您需要在z-index:2标记上position:relative和p。

p {position:relative;z-index:2;}

完整代码：

body img {
  position:absolute;
  max-width: auto;
   height: auto;
}

.radio {
    position:absolute;
}

@-webkit-keyframes imgFade {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-moz-keyframes imgFade {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@-o-keyframes imgFade {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

@keyframes imgFade {
 0% {
   opacity:1;
 }
 17% {
   opacity:1;
 }
 25% {
   opacity:0;
 }
 92% {
   opacity:0;
 }
 100% {
   opacity:1;
 }
}

body img {

    position: absolute;
    top: 0;
    right: 0;
    z-index: 1;

  -webkit-animation-name: imgFade;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-duration: 64s;

  -moz-animation-name: imgFade;
  -moz-animation-timing-function: ease-in-out;
  -moz-animation-iteration-count: infinite;
  -moz-animation-duration: 64s;

  -o-animation-name: imgFade;
  -o-animation-timing-function: ease-in-out;
  -o-animation-iteration-count: infinite;
  -o-animation-duration: 64s;

  animation-name: imgFade;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-duration: 64s;
}
body img:nth-of-type(1) {
  -webkit-animation-delay: 48s;
  -moz-animation-delay: 48s;
  -o-animation-delay: 48s;
  animation-delay: 48s;
}
body img:nth-of-type(2) {
  -webkit-animation-delay: 32s;
  -moz-animation-delay: 32s;
  -o-animation-delay: 32s;
  animation-delay: 32s;
}
body img:nth-of-type(3) {
  -webkit-animation-delay: 16s;
  -moz-animation-delay: 16s;
  -o-animation-delay: 16s;
  animation-delay: 16s;
}
body img:nth-of-type(4) {
  -webkit-animation-delay: 8;
  -moz-animation-delay: 8;
  -o-animation-delay: 8;
  animation-delay: 8;
}

p {position:relative;z-index:2;border:1px solid #ff0000;}

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <meta name="author" content="Script Tutorials" />
        <title>Home</title>
        
    </head>

    <body>

<p>This is the content for Layout P Tag</p>

    <img src="http://placehold.it/850x850" style= "height: 100%; width: 100%" align="absbottom">
    <img src="http://placehold.it/850x850" style= "height: 100%; width: 100%" align="absbottom">
    <img src="http://placehold.it/850x850" style= "height: 100%; width: 100%" align="absbottom">
    <img src="http://placehold.it/850x850" style= "height: 100%; width: 100%" align="absbottom">

    </body>
</html>

图片上的文字

1 个答案: