web-dev-qa-db-ja.com

CSSを使用した背景画像のクリップ/切り抜き

私はこのHTMLを持っています：

<div id="graphic">lorem ipsum</div>

このCSSで：

#graphic { background-image: url(image.jpg); width: 200px; height: 100px;}

私が適用している背景画像は200x100ピクセルですが、背景画像の200x50ピクセルのトリミング部分のみを表示したいです。

background-clipは、このための正しいCSSプロパティではないようです。代わりに何を使用できますか？

background-positionは使用しないでください。これは、表示する画像部分がCSSが定義されている要素よりも小さいSpriteコンテキストで上記のCSSを使用しているためです。

csscss-sprites
67
Dahie

独自の次元コンテキストを使用して、グラフィックを擬似要素に配置できます。

#graphic {
  position: relative;
  width: 200px;
  height: 100px;
}
#graphic::before {
  position: absolute;
  content: '';
  z-index: -1;
  width: 200px;
  height: 50px;
  background-image: url(image.jpg);
}

#graphic {
    width: 200px;
    height: 100px;
    position: relative;
}
#graphic::before {
    content: '';
    
    position: absolute;
    width: 200px;
    height: 50px;
    z-index: -1;
    
    background-image: url(http://placehold.it/500x500/); /* Image is 500px by 500px, but only 200px by 50px is showing. */
}
<div id="graphic">lorem ipsum</div>

ブラウザのサポートは良好ですが、 IE8をサポートする必要がある場合は、単一のコロン:before。 IEはそれ以前のバージョンではどちらの構文もサポートしていません。

92
Brent

次のように書くことができます：

#graphic { 
 background-image: url(image.jpg); 
 background-position: 0 -50px; 
 width: 200px; 
 height: 100px;
}
8
sandeep

別のオプションは、linear-gradient()を使用して画像の端を隠すことです。これは愚かな解決策であることに注意してください。したがって、私はそれを説明するのにあまり努力しません。

.flair {
  min-width: 50px; /* width larger than Sprite */
  text-indent: 60px;
  height: 25px;
  display: inline-block;
  background:
    linear-gradient(#F00, #F00) 50px 0/999px 1px repeat-y,
    url('https://championmains.github.io/dynamicflairs/Riven/spritesheet.png') #F00;
}

.flair-classic {
  background-position: 50px 0, 0 -25px;
}

.flair-r2 {
  background-position: 50px 0, -50px -175px;
}

.flair-smite {
  text-indent: 35px;
  background-position: 25px 0, -50px -25px;
}
<img src="https://championmains.github.io/dynamicflairs/Riven/spritesheet.png" alt="spritesheet" /><br />
<br />
<span class="flair flair-classic">classic Sprite</span><br /><br />
<span class="flair flair-r2">r2 Sprite</span><br /><br />
<span class="flair flair-smite">smite Sprite</span><br /><br />

このページでこのメソッドを使用しています： https://championmains.github.io/dynamicflairs/Riven/ and use not ::before または ::after要素は、別のハックで既に使用しているためです。

3
Mingwei Samuel