前提
topページで本の形をしたcssを実装しました。本の表紙を画像に反映しています。
実現したいこと
本の表紙を画像にして、反映させたい。
発生している問題・エラーメッセージ
background-image: url();で指定しているが、ローカル環境で反映されない。
該当のソースコード
--HTML-- <div class="top-novel__book"> <div class="top-novel__book-inbox"> <ul class="top-novel__list"> <?php $paged = get_query_var('paged') ? get_query_var('paged') : 1; $args = array( 'post_type' => 'novel', // 'category_name' => 'all,event,news', 'order' => 'DESC', 'posts_per_page' => 4, 'paged' => $paged, ); $my_query = new WP_Query($args); if ($my_query->have_posts()) : ?> <?php while ($my_query->have_posts()) : $my_query->the_post(); ?> <li class="top-novel__item"> <a href="<?php the_permalink(); ?>"> ~ <?php the_title(); ?> </a> </li> <?php endwhile; ?> <?php endif; ?> </ul> </div> <!-- /.top-novel__book-index --> </div> <!-- /.top-novel__book --> --HTML-- --css-- .top-novel__book { -webkit-box-sizing: border-box; -webkit-box-shadow: -2px 0 0 0 #fff, 2px 5px 1px 4px rgba(0, 0, 0, 0.2); -webkit-perspective: 1000px; -webkit-perspective-origin: 0 150%; -webkit-transform-style: preserve-3d; box-sizing: border-box; z-index: 1; position: relative; width: 280px; height: 400px; margin: 0 auto; margin-top: 50px; margin-right: 170px; padding-bottom: 10px; transform-style: preserve-3d; background-color: #fff; box-shadow: -2px 0 0 0 #fff, 2px 5px 1px 4px rgba(0, 0, 0, 0.2); perspective: 1000px; perspective-origin: 0 150%; } @media screen and (max-width: 1100px) { .top-novel__book { margin-right: auto; } } .top-novel__book:hover .top-novel__book-index { -webkit-box-shadow: 0 8px 0 0 #afada3, 0 0 8px 0 rgba(0, 0, 0, 0) inset, -2px 0 0 0 #dbdbdb; box-shadow: 0 8px 0 0 #afada3, 0 0 8px 0 rgba(0, 0, 0, 0) inset, -2px 0 0 0 #dbdbdb; } .top-novel__book::before, .top-novel__book::after { -webkit-transition: all 2.5s ease; -webkit-transform-origin: 0 0; display: block; z-index: 1; position: absolute; top: 0; left: 0; width: 100%; height: calc(100% - 10px); transform-origin: 0 0; transition: all 2.5s ease; } .top-novel__book::before { -webkit-transform: rotateY(0deg) translateZ(1px); -webkit-box-shadow: 0 2px 0 0 #b3b2b2; transform: rotateY(0deg) translateZ(1px); background-image: url(period/img/top/period-novel-top.png); background-position: -47px -49px; background-size: 380px; background-repeat: no-repeat; background-color: #dbdbdb; box-shadow: 0 2px 0 0 #b3b2b2; content: ""; text-shadow: -1px -1px 0 rgba(0, 0, 0, 0.4); } .top-novel__book::after { -webkit-transform: rotateY(0deg) translateZ(0px); transform: rotateY(0deg) translateZ(0px); background-color: #fff; content: ""; } .top-novel__book.is-active::before, .top-novel__book:active::before { -webkit-transform: rotateY(-185deg) translateZ(1px); transform: rotateY(-185deg) translateZ(1px); } .top-novel__book.is-active::after { -webkit-transform: rotateY(-185deg) translateZ(0px); transform: rotateY(-185deg) translateZ(0px); background-color: #dbdbdb; } .top-novel__book-index { -webkit-box-sizing: border-box; -webkit-transition: all 1.8s ease; -webkit-transition-delay: 0.3s; -webkit-box-shadow: 0 8px 0 0 #afada3, 200px 0 1px 0 rgba(0, 0, 0, 0.4) inset, -2px 0 0 0 #dbdbdb; box-sizing: border-box; height: 100%; padding: 10px; background-color: #e2e1dc; box-shadow: 0 8px 0 0 #afada3, 200px 0 1px 0 rgba(0, 0, 0, 0.4) inset, -2px 0 0 0 #dbdbdb; transition: all 1.8s ease; transition-delay: 0.3s; } .top-novel__item { padding: 20px 15px; } .top-novel__item:first-child { padding-top: 60px; } --css--
試したこと
background-image: url()に絶対パスでは表示されたのだが、ルート相対パスや相対パスでは反映されなかった。また、background-image: image-url();でも反映されなかった。
補足情報(FW/ツールのバージョンなど)
ここにより詳細な情報を記載してください。
回答1件
あなたの回答
tips
プレビュー