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

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

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

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

CSSのコードは次のようになります。

コード例

<style>
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;
}
</style>
<blockquote>
	<p>ここに引用コンテンツが入ります。</p>
</blockquote>

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

こちらの記事は役に立ちましたか？

コメントありがとうございます！
運営の参考にさせていただきます。