Découper / recadrer l'image de fond avec CSS

Question

J'ai ce code HTML:

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

avec ce CSS:

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

L'image de fond je suis en train d'utiliser est 200x100 px, mais je ne veux afficher une partie recadrée de l'image d'arrière-plan de 200x50 px.

background-clip ne semble pas être le droit de la propriété CSS pour cela. Ce que je peux utiliser à la place?

background-position ne doit pas être utilisé, parce que je suis à l'aide de la CSS dans un sprite contexte où la partie de l'image que je veux montrer, c'est plus petit que l'élément sur lequel le CSS est défini.

Answer 1

Vous pouvez placer le graphique dans un pseudoélément avec son propre contexte dimensionnel:

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

Voici un jsfiddle: http://jsfiddle.net/blineberry/BhbrL/1023/

Les clauses de non-responsabilité habituelles concernant l'incompatibilité avec IE7 et versions antérieures s'appliquent. Ces navigateurs ne reconnaissent pas :before .

Answer 2

peut-être que vous pouvez écrire comme ceci:

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