LoginSignup
@gorira11

Are you sure you want to delete the question?

Leaving a resolved question undeleted may help others!

背景画像をスライドショーのように表示させたい

Q&A

Closed

Ruby

解決したいこと

背景画像をスライドショーのように表示させたい
また、画像をランダムで表示するには
javascriptにどのような記述をすればいいのかわからない

https://yukipan-world.com/web-tips/568/#i-2
このサイトの画像の上に文字を表示させたい場合をコピペしましたが、
画像が表示されず悩んでいます。

該当するソースコード

application.html

<body>
    <div class="slideBox">
      <p class="title">cssのみでつくったスライド</p>
      <div class="item2" style="background-image: url(./assets/images/1.jpg)"></div>
      <div class="item2" style="background-image: url(./assets/images/2.jpg)"></div>
      <div class="item2" style="background-image: url(./assets/images/first-back.jpg)"></div>
    </div>
  </body>

例）

.slideBox {
  height: 500px;
  overflow: hidden;
  position: relative;
}


.title {
  font-size: 32px;
  color: #fff;
  z-index: 11;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}

.item2 {
  z-index: 10;
  opacity: 0;
  width: 100%;
  height: 500px;
  background-position: center center;
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  left: 0;
  top: 0;
  -webkit-animation: anime 30s 0s infinite;
  animation: anime 30s 0s infinite;
}

.item2:nth-of-type(2) {
  -webkit-animation-delay: 10s;
  animation-delay: 10s;
}

.item2:nth-of-type(3) {
  -webkit-animation-delay: 20s;
  animation-delay: 20s;
}


@keyframes anime {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}

@-webkit-keyframes anime {
  0% {
    opacity: 0;
  }
  30% {
    opacity: 1;
  }
  35% {
    opacity: 1;
  }
  50% {
    opacity: 0;
    z-index: 9;
  }
  100% {
    opacity: 0;
  }
}
0 likes

2Answer

Your answer might help someone💌

LoginSign Up