【CSS】border-radiusで画像に枠線が表示される場合の対処法。

divタグの中で呼び出した背景画像にborder-radiusを適用したところ、薄いグレーの枠線が表示されてしまっった。この対処法について。（border-radiusでは枠線はでない認識だった、、）

コードの中身

.css

.c-jumbotron--block{border-radius:8px;height:320px;}

.html

<divclass="c-jumbotron c-jumbotron--block"style="background-image: url('http://hoge/1xxx.jpg');"></div>

divタグ内のbackground-imageにborder-radiusを適用したシンプルな仕様。

これまでの画像は濃い色だったので枠線が目立たなかったが、画像を変更したことで白地になり枠線が見えるようになった、、

cssにbackground-clip: padding-box;を追加。

.css

.c-jumbotron--block{border-radius:8px;height:320px;background-clip:padding-box;}

これでグレーの枠線が表示されなくなった。

要素の背景をどこまで適用するか指定するプロパティ。

値	内容
border-box	背景を境界の外側の辺まで拡張。境界の下に重ね合わせる
padding-box	背景をパディングの外側の辺まで拡張。境界の下には背景を表示しない。
content-box	背景をコンテンツボックスの中に (切り取って) 表示。
text	背景を前景のテキストの中に (切り取って) 表示。