前提
rails で投稿アプリを作っています。
背景画像がスライドショーのように流れるように設定したいのですが、
画像が表示されません。
画像はapp/assets/imagesに保存しています。
https://yukipan-world.com/web-tips/568/#i-2
このサイトの画像の上にテキストを表示させたい場合を参照しています。
また、背景画像をランダムに流すには
javascriptにどのような記述を行えばいいのでしょうか
該当のソースコード
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> </body>
application/scss .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; } }
回答1件
あなたの回答
tips
プレビュー