How do you fill the image within other image's boundaries?

Areg Published at Dev

Areg

Hi guys i am trying to fill an image inside a png outline like this

Currently what i have

<img _ngcontent-udx-c1="" alt="content-icon" src="https://i.stack.imgur.com/ob90p.png" ng-reflect-ng-style="[object Object]" style="background: url(&quot;https://hips.hearstapps.com/hmg-prod.s3.amazonaws.com/images/nature-quotes-1557340276.jpg&quot;);">

where the event-icon.png is the white outline and the background is some random image from google. And the result is

But i want it do fill inside the other image's boundaries instead of just pushing it out through the entire tag. How can i achieve this?

Temani Afif

You need to create another image like below and use it as mask:

body {
  background:lightblue;
}

<img src="https://i.ibb.co/RyJRkpB/mask.png" />
<img src="https://i.stack.imgur.com/ob90p.png" />

In the above we have both images, the mask and the one with outline and you get the following if you combine them:

.box {
  -webkit-mask:url(https://i.ibb.co/RyJRkpB/mask.png) center/contain no-repeat;
          mask:url(https://i.ibb.co/RyJRkpB/mask.png) center/contain no-repeat;
  background:url(https://picsum.photos/id/1014/800/800) center/cover;
}

body {
  background:lightblue;
}

<img src="https://i.stack.imgur.com/ob90p.png" class="box">

The result isn't perfect because I am bad at image editing but you can easily edit the mask image to make it better

Collected from the Internet

Please contact [email protected] to delete if infringement.

edited at2021-05-28

Comments

0 comments

How do you fill the image within other image's boundaries?

How do you fill the image within other image's boundaries?

pump.io port in URL

How to import an asset in swift using Bundle.main.path() in a react-native native module

Failed to listen on localhost:8000 (reason: Cannot assign requested address)

Double spacing in rmarkdown pdf

SQL Server : need add a dot before two last character

C++ 16 bit grayscale gradient image from 2D array

JMeter: Why get error when try to save test plan

JWT gives JsonWebTokenError "invalid token"

How to make thrown errors visible outside of a Promise?

How to tell if iOS Today Widget is being updated in the background?

Calling Doctrine clear() with an argument is deprecated

Capybara Selenium Chrome opens About Google Chrome

How to update azerothcore-wotlk docker container

Adding Ripple Effect to RecyclerView item

mysql.connector.errors.InterfaceError: 2003: Can't connect to MySQL server on '127.0.0.1:3306' (111 Connection refused)

Error while applying filter on dataframe - PySpark

Unable to add slack to bluemix project

MyPy fails dataclass argument with optional list of objects type

How can I validate and parse phone numbers to extract their country calling code and area code?

Single Sign-On in Spring by using SAML Extension and Shibboleth

python how to create many-to-many of lists inside one list