border-imageを使った背景画像上のオーバーレイのサンプル

概要
- 背景画像が指定された要素に対し、 `border-image` を使ってオーバーレイ敷き、テキストを配置するサンプル - 制約としては、背景画像の要素にしか適用できず、 `img` 要素に対しては適用できない

デモ1

オーバーレイなし

オーバーレイあり

デモ1のコード

CSS

 
/* オーバーレイの指定 */
.bg_overlay {
  border-image: fill 0 linear-gradient(#0003, #000);
}
/* 背景画像表示とテキスト配置の指定 */
.banner_container {
  width: 320px;
  height: 320px;
  max-width: 100%;
  background: url(/img/cocktails/w640/fantasia_02.jpeg) center/cover;
  display: grid;
  place-items:center;
  text-align: center;
  font-family: sans-serif;
  font-size: 1.5rem;
  color: #fff;
}

HTML

 
<div class="bg_overlay banner_container">
  <p>with Overlay</p>
</div>

デモ2

マウスオーバー時にオーバーレイ表示

デモ2のコード

CSS

 
/* マウスオーバーした際にだけオーバーレイの指定 */
@media (any-hover: hover) {
  .hover_overlay:hover {
    border-image: fill 0 linear-gradient(#0003, #000);
  }
  .hover_overlay:hover::after {
    content: attr(data-label);
  }
}

HTML

 
<div class="bg_overlay banner_container" data-label="with Overlay"></div>

参照