una - Clip/Recortar imagen de fondo con CSS

subir imagen css

Question

Tengo este HTML:

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

con este CSS:

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

La imagen de fondo que estoy aplicando es de 200x100 px, pero solo quiero mostrar una parte recortada de la imagen de fondo de 200x50 px.

background-clip no parece ser la propiedad correcta de CSS para esto. ¿Qué puedo usar en su lugar?

background-position no se debe utilizar, porque estoy usando el CSS anterior en un contexto de sprite donde la parte de la imagen que quiero mostrar es más pequeña que el elemento en el que se define el CSS.

Answer 1

Otra opción es usar linear-gradient() para cubrir los bordes de su imagen. Tenga en cuenta que esta es una solución estúpida, por lo que no voy a poner mucho esfuerzo en explicarlo ...

.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 />

Estoy usando este método en esta página: https://championmains.github.io/dynamicflairs/riven/ y no puedo usar los elementos ::before o ::after porque ya los estoy usando para otro hack.

Answer 2

Puede poner el gráfico en un pseudo-elemento con su propio contexto dimensional:

#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>

El soporte del navegador es bueno, pero si necesita soportar IE8, use un solo punto y coma :before . IE no tiene soporte para ninguna de las sintaxis en versiones anteriores a eso.

Answer 3

puede ser que puedas escribir así:

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