/    Sign up×
Community /Pin to ProfileBookmark

How to mask an image using css correctly?

Copy linkTweet thisAlerts:
Jun 16.2021

Hi everyone how are you all doing ? Please help I am just about a week old in the css world and really lost on how to go about masking correctly, however since my office css tutor Won’t go straight to the point I went in shearch of help online and found this css code on some website

Css mask

“`
* {
box-sizing: border-box;
}
body {
margin: 0;
background: #8f7a66;
}

.el {
width: 100vw;
height: 100vh;
padding: 1rem;

background-image: url(https://images.unsplash.com/photo-1528287942171-fbe365d1d9ac?ixlib=rb-1.2.1&q=85&fm=jpg&crop=entropy&w=1200&cs=srgb&ixid=eyJhcHBfaWQiOjE0NTg5fQ);
background-size: cover;
background-position: center;

mask-image: linear-gradient(to bottom, transparent 10%, black);
}
“`

It’s did went a long way but am totally lost on how to change the image url to the following below
https://www.pexels.com/photo/photo-of-woman-wearing-black-bucket-hat-4126254/

Any assistance will be greatly appreciated 🙏
Thanks in advance

to post a comment
CSSHTML

3 Comments(s) ↴

Copy linkTweet thisAlerts:
@SempervivumJun 16.2021 — The reason why the link to the image on pexels.com doesn't work is that it doesn't point to a pure image but a website where the image is embedded. You need to download the image and refer to it's URL in your CSS. The license info at pexels.com is stating that this is permitted.

Note that `mask-image</C> needs a browser specific prefix in webkit browsers:
<CODE>`<i>
</i> -webkit-mask-image: linear-gradient(to bottom, transparent 10%, black);
mask-image: linear-gradient(to bottom, transparent 10%, black);<i>
</i>`</CODE>

BTW: Please use code tags when posting code: <C>your code here` or triple backticks.

I edited your posting accordingly.
Copy linkTweet thisAlerts:
@Ashleywilliams22authorJun 17.2021 — Thankyou so so much 🙏
Copy linkTweet thisAlerts:
@iamkajalJun 22.2021 — You can do that with this syntax

mask-image: &lt;mask-reference&gt;#

/* where */<br/>
&lt;mask-reference&gt; = none | &lt;image&gt; | &lt;mask-source&gt;

/* and where */

&lt;mask-source&gt; = &lt;url&gt; /* and the URL points to an SVG &lt;mask&gt; element */
×

Success!

Help @Ashleywilliams22 spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 — BETA 4.25,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,

tipper: @Samric24,
tipped: article
amount: 1000 SATS,
)...