CSS3 : 擬似要素へのbackground-imageを継承するビジュアル表現テスト

まずはサンプルから

See the Pen background inherit test by Kazuyoshi Goto (@KazuyoshiGoto) on CodePen.

よくあるサムネイルの一覧表示では background-size:cover で画像を背景に敷き詰めるという方法があります。この手法は一般的ですが、表示幅によって見切れが発生します。

その見切れがイヤ！となると background-size:contain で対応できるのですが、contain の場合は幅が余ります。

backgroud-size	効果	メリット・デメリット
cover	背景画像の短辺ベースではめ込まれる	要素内が隙間なく背景画像で埋め尽くされるが、画像が見切れる
cntain	背景画像の長辺ベースではめ込まれる	画像の全体が確実に表示されるが、要素内に余白ができる

上記サンプルの手法は、

• :before に親要素の背景を継承し cover で見切れても引き伸ばす
• :after に親要素の背景を継承し contain で見きれず表示する

というハイブリッドな手法で実現しています。

CSSの「継承」とは

たとえば以下のようなCSSの場合。

.hoge {
  color: #f00;
}
.hoge a {
  color: inherit;
}

inheritは親要素の値を継承する記述です。上記例の場合、.hoge内のaタグは親要素のcolorの値を継承して赤くなります。

「値の継承」なので背景画像まで継承できることは盲点で、それが出来て目からウロコだった、という話です。

CSS

.art {
  position: relative;
  width: 500px;
  height: 300px;
  margin: 30px auto 0;
  border-radius: 4px;
  overflow: hidden;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center center;
}
.art:before, .art:after {
  content: "";
  position: absolute;
  background-image: inherit;
  background-repeat: inherit;
  background-position: inherit;
}
.art:before {
  width: 110%;
  height: 110%;
  top: -5%;
  left: -5%;
  background-size: cover;
  filter: blur(10px);
  /*
  サイズを少し大きくしてネガティブマージンを取っているのは、
  blurによるフチのボケを回避してきれいに見せるため。
  */
}
.art:after {
  width: 100%;
  height: 100%;
  background-size: contain;
}

親要素の .art にはWordPressなど動的にサムネイルを設定する実用シーンを考慮しHTMLで background-image を埋め込んでいます。

疑似要素へ動的に背景をはめ込められないか考えたところ、 inherit を試したらうまく行ったという寸法です。

まとめ

inherit の仕様上当然のことかもしれないのですが、「値を継承する」という先入観から画像も継承できることに目からウロコだったのでつい書き残しました。

画像パスもただの文字列なので値っちゃ値ですね。