Q&A
画像がないとか、パスが間違っているとか、ブラウザのキャッシュに古い CSS や画像があるとかは確認済みですか？
画像をマウスオーバーすると説明＆リンクが浮かびあがるこちらの記事のExample1を使いたいのですが、
背景画像となる.ch-img-1のbackground-imageのＣＳＳが効かずこまっております。
高さが指定されていないのかとも考えたのですが、.ch-itemで高さも指定されており、、
参考記事のＤＥＭＯと見比べてみてもどこに誤りがあるのか解りません。
どうしたら背景画像がきちんと表示されるようになるのでしょうか。
html
1<ul class="ch-grid"> 2 <li> 3 <div class="ch-item ch-img-1"> 4 <div class="ch-info"> 5 <h3>Use what you have</h3> 6 <p>by Angela Duncan <a href="http://drbl.in/eOPF">View on Dribbble</a></p> 7 </div> 8 </div> 9 </li> 10 <li> 11 <div class="ch-item ch-img-2"> 12 <div class="ch-info"> 13 <h3>Common Causes of Stains</h3> 14 <p>by Antonio F. Mondragon <a href="http://drbl.in/eKMi">View on Dribbble</a></p> 15 </div> 16 </div> 17 </li> 18 <li> 19 <div class="ch-item ch-img-3"> 20 <div class="ch-info"> 21 <h3>Pink Lightning</h3> 22 <p>by Charlie Wagers <a href="http://drbl.in/ekhp">View on Dribbble</a></p> 23 </div> 24 </div> 25 </li> 26</ul>
css
1.ch-grid { 2 margin: 20px 0 0 0; 3 padding: 0; 4 list-style: none; 5 display: block; 6 text-align: center; 7 width: 100%; 8} 9 10.ch-grid:after, 11.ch-item:before { 12 content: ''; 13 display: table; 14} 15 16.ch-grid:after { 17 clear: both; 18} 19 20.ch-grid li { 21 width: 220px; 22 height: 220px; 23 display: inline-block; 24 margin: 20px; 25} 26.ch-item { 27 width: 100%; 28 height: 100%; 29 border-radius: 50%; 30 overflow: hidden; 31 position: relative; 32 cursor: default; 33 box-shadow: 34 inset 0 0 0 16px rgba(255,255,255,0.6), 35 0 1px 2px rgba(0,0,0,0.1); 36 transition: all 0.4s ease-in-out; 37} 38.ch-img-1 { 39 background-image: url(../images/dia2.jpg); 40} 41.ch-img-2 { 42 background-image: url(../images/dia3.jpg); 43} 44.ch-img-3 { 45 background-image: url(../images/dia4.jpg); 46} 47.ch-info { 48 position: absolute; 49 background: rgba(63,147,147, 0.8); 50 width: inherit; 51 height: inherit; 52 border-radius: 50%; 53 overflow: hidden; 54 opacity: 0; 55 transition: all 0.4s ease-in-out; 56 transform: scale(0); 57} 58.ch-info h3 { 59 color: #fff; 60 text-transform: uppercase; 61 letter-spacing: 2px; 62 font-size: 22px; 63 margin: 0 30px; 64 padding: 45px 0 0 0; 65 height: 140px; 66 font-family: 'Open Sans', Arial, sans-serif; 67 text-shadow: 68 0 0 1px #fff, 69 0 1px 2px rgba(0,0,0,0.3); 70} 71.ch-info p { 72 color: #fff; 73 padding: 10px 5px; 74 font-style: italic; 75 margin: 0 30px; 76 font-size: 12px; 77 border-top: 1px solid rgba(255,255,255,0.5); 78 opacity: 0; 79 transition: all 1s ease-in-out 0.4s; 80} 81.ch-info p a { 82 display: block; 83 color: rgba(255,255,255,0.7); 84 font-style: normal; 85 font-weight: 700; 86 text-transform: uppercase; 87 font-size: 9px; 88 letter-spacing: 1px; 89 padding-top: 4px; 90 font-family: 'Open Sans', Arial, sans-serif; 91} 92 93.ch-info p a:hover { 94 color: rgba(255,242,34, 0.8); 95} 96.ch-item:hover { 97 box-shadow: 98 inset 0 0 0 1px rgba(255,255,255,0.1), 99 0 1px 2px rgba(0,0,0,0.1); 100} 101.ch-item:hover .ch-info { 102 transform: scale(1); 103 opacity: 1; 104} 105.ch-item:hover .ch-info p { 106 opacity: 1; 107}
画像は他の場所に表示させてパスが正しいことは確認しました。ブラウザのキャッシュも削除して表示し直していますが、なんとも表示されず頭を抱えています・・・。
あぁ・・・再度パスを書き直したら表示されました。ごめんなさい！！！ご指摘ありがとうございます。反省します
回答2件
0
ベストアンサー
動くサンプル：https://jsfiddle.net/uaxevos2/
動きますね。
../images/dia2.jpg のファイルの位置が違うのでは？スタイルシートとの位置関係は下記の様になっていますか？
text
1/folder/images/dia2.jpg 2/folder/css/style.css
投稿2017/12/06 01:18
総合スコア69400
画像自体の端が白くそこが表示されてしまいなにも表示されていないように感じたというかなりの初歩的ミスでした。お騒がせして申し訳ありません。サンプルまで作成頂き感謝致します。
0
シングルクォーテーションで囲むと表示されませんか？
CSS
1background-image: url('../images/dia2.jpg');
投稿2017/12/06 01:17
退会済みユーザー
総合スコア0
画像自体の端が白くそこが表示されてしまいなにも表示されていないように感じたというかなりの初歩的ミスでした。お騒がせして申し訳ありません。他の画像を表示させてみてそのことに気づきました。
ご回答ありがとうございます。
あなたの回答
tips
プレビュー
