I have the following HTML and CSS code:
<!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>
That results in the following image:
Now, how can I make it look like this?:
Or what technology do you recommend that I can make that cutout of the design on the sweater?
Greetings.
It would depend on what the source images are exactly, but really what you have to explore is the CSS blending modes.
The opacity uses the normal blending mode by default, that is, just transparency.
But there are some others. When the background object is light, let's say a white sweatshirt, and the printing is with transparent ink, the one you should use is multiply.
For this case maybe lighten or screen, you will have to try with your source images.
Not all browsers accept these blending modes.