1

Tengo el siguiente código HTML y CSS:

<!DOCTYPE html>
<html lang="en" class="no-js">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
        <meta name="viewport" content="width=device-width, initial-scale=1.0"> 
        <title>Imagen</title>
<style>

.wrapper {
  position: relative;
  width: 300px;
  height: 300px;
}

img {
  width: 100%;
  height: auto;
}

.primary {
  position: absolute;
}

.secondary {
    background-image: url(A001.jpg);
    background-position: center;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border-radius: 6px;
    background-blend-mode: screen;
    background-color: #252222;
    opacity: .4;
}



</style>
</head>
<body>


<div class="wrapper">
  <img src="plantilla.png" class="primary">
  <div class="secondary">
  </div>




</body>
</html>

Eso da como resultado la siguiente imagen:

introducir la descripción de la imagen aquí

Ahora, ¿cómo puedo hacer para que quede de esta forma?:

introducir la descripción de la imagen aquí

O ¿cual tecnología me recomiendan que pueda hacer ese recorte del diseño sobre el sueter?

Saludos.

8
  • Buena pregunta. De momento yo no sé si es posible, pero se me ocurre otra manera: y si recortas la imagen de la pantera con la forma del sueter, utilizando photoshop por ejemplo? Así luego sólo tienes que mostrar esa imagen sobre el sueter y no tienes que manipularla con código.
    – Jemonge
    el 18 feb. 2020 a las 14:48
  • 1
    Puedes utilizar clip-path de CSS3. Acá te dejo el link de un tutorial: programandoamedianoche.com/2019/09/propiedad-clip-path. el 18 feb. 2020 a las 15:34
  • Hola @Gustavo Cantero ya vi la opción del clip-path en css pero no se como hacer para que funcione con una imagen como la que tengo de sueter, funciona bien pero con formas como un circulo o un rectangulo.
    – estrada
    el 18 feb. 2020 a las 16:57
  • 1
    @estrada, en el estilo de la imagen del tigre deberías agregar un clip-path: polygon con la forma del sweater. el 18 feb. 2020 a las 17:00
  • 1
    @estrada a lo que veo, tienes que darle la forma del sueter agregando pares de puntos que indican su posición X, Y. En este enlace puedes ver más cómo funciona clip-path y manipularlo sobre la imagen para darle la forma que necesitas. bennettfeely.com/clippy
    – Jemonge
    el 18 feb. 2020 a las 18:04

1 respuesta 1

2

Dependería de cuales son las imágenes fuente exactamente, pero en realidad lo que tienes que explorar son los blending modes de CSS.

El opacity utilliza el blending mode normal por default, esto es, simplemente transparencia.

Pero existen algunos otros. Cuando el objeto del fondo es claro, digamos una sudadera blanca, y la impresión es con tinta transparente, el que te conviene usar es el multiply.

Para este caso tal vez lighten o screen, tendrás que probar con tus imágenes fuente.

.secondary
    {mix-blend-mode: screen;}

No todos los navegadores aceptan estos blending modes.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.