複数の背景画像を使って、引用のコンテンツにデザインを適用する

複数の背景画像で引用を表現する

今回は次のような引用コンテンツを作っていきます。

左右の「"」はSVG形式のアイコンを使います。

こちらの画像をCSSのbackgroundプロパティで2回表示する指定をします。

CSS コード例

blockquote {
  padding: 20px 50px;
  width: 400px;
  border-radius: 10px;
  background:  url(./images/icon_quote.svg) 15px 15px / 5% auto no-repeat,
    #ccc url(./images/icon_quote.svg) right 15px top 15px / 5% auto no-repeat;
}

HTML コード例

<blockquote>
  <p>ここに引用コンテンツが入ります。</p>
</blockquote>

backgroundプロパティで2つの背景画像を指定しているところがポイントです。
使っている画像自体は同じものですが、それぞれ左側（15px 15px）と右側（right 15px top 15px）で位置をずらしています。