ミギムキ

[CSS] 背景画像に文字を載せたリンクボタンをレスポンシブに並べたい

サンプルコード

html

<ul class="links_bg_text"> <li> <a href="<?php echo esc_url(home_url('/xxx/')); ?>"> <p>サンプルテキスト</p> </a> </li> <li> <a href="<?php echo esc_url(home_url('/xxx/')); ?>"> <p>サンプルテキスト</p> </a> </li> <li> <a href="<?php echo esc_url(home_url('/xxx/')); ?>"> <p>サンプルテキスト</p> </a> </li> </ul>
スポンサー広告

CSS

.links_bg_text { list-style: none; } .links_bg_text > li { position: relative; margin: 30px auto 0px; width: 80%; height: 200px; background-repeat: no-repeat; background-position: center; background-size: cover; } .links_bg_text > li:nth-of-type(1) { background-image: url(xxx.jpg); } .links_bg_text > li:nth-of-type(2) { background-image: url(xxx.jpg); } .links_bg_text > li:nth-of-type(3) { background-image: url(xxx.jpg); } .links_bg_text > li > a { display: block; width: 100%; height: 100%; text-decoration: none; } .links_bg_text > li > a:hover { background-color: rgba(255, 255, 255, 0.2); } .links_bg_text > li > a > p { position: absolute; bottom: 1em; left: 0px; width: 100%; color: #fff; font-size: 16px; font-weight: bold; text-align: center; } .links_bg_text > li > a > p:after { margin: 0px 0px 0px 1em; font-family: "Font Awesome 5 Free"; font-weight: 900; content: "\f105"; } @media print, (min-width: 768px) { .links_bg_text { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0px -15px; } .links_bg_text > li { margin: 30px 15px 0px; width: calc(50% - 30px); } } @media print, (min-width: 992px) { .links_bg_text > li { width: calc(33.3% - 30px); } }

文字に背景色をつけるパターン

CSS

.links_bg_text { list-style: none; } .links_bg_text > li { position: relative; z-index: 1; margin: 30px auto 0px; width: 80%; height: 200px; } .links_bg_text > li:before { position: absolute; top: 0px; left: 0px; right: 0px; bottom: 2em; z-index: -1; background-repeat: no-repeat; background-position: center; background-size: cover; content: ""; } .links_bg_text > li:nth-of-type(1):before { background-image: url(xxx.jpg); } .links_bg_text > li:nth-of-type(2):before { background-image: url(xxx.jpg); } .links_bg_text > li:nth-of-type(3):before { background-image: url(xxx.jpg); } .links_bg_text > li > a { display: block; width: 100%; height: 100%; text-decoration: none; } .links_bg_text > li > a:hover { background-color: rgba(255, 255, 255, 0.2); } .links_bg_text > li > a > p { position: absolute; bottom: 0px; left: 0px; padding: 0.5em; width: 100%; background-color: #fff; color: #3388dd; font-size: 16px; font-weight: bold; text-align: center; } @media print, (min-width: 768px) { .links_bg_text { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; margin: 0px -15px; } .links_bg_text > li { margin: 30px 15px 0px; width: calc(50% - 30px); } } @media print, (min-width: 992px) { .links_bg_text > li { width: calc(33.3% - 30px); } }
スポンサー広告