CODEWITHSUNDEEP
htmlcss
user10246601
user10246601

Reputation:

Display and image inside a text

Let's say I have an image like this:

background

I would like to display transparent letters and fill everything to look something like this:

UPDATE: I would like to display a text with an image one it, that would look like this:

404 img

How can I accomplish that using CSS? Thank you in advance!

Upvotes: 2

Views: 1483

Answers (3)

sdn404
sdn404

Reputation: 624

Use css background-clip property.

Example code:

h1 {
    color: white;  /* Fallback: assume this color ON TOP of image */
    background: url('https://i.sstatic.net/QqRWG.jpg') no-repeat;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    font-size: 200px;
}
<h1>404</h1>

Hope it helps !

Upvotes: 1

G-Cyrillus
G-Cyrillus

Reputation: 105853

CSS has background-clip for this kind of styling:

text

The background is painted within (clipped to) the foreground text.

background-clip among flex and calc can do a simple 404 error page:

h1 {
  background:url(https://i.sstatic.net/QqRWG.jpg) center;
  color:transparent;
  background-clip:text;
  /* makup for a basic 404 page */
  font-size:calc(15vh + 15vw);
  display:flex;
  height:100vh;
  align-items:center;
  justify-content:center;
}
* {
  margin:0;
}
<h1>404</h1>

Upvotes: 0

Alexandr
Alexandr

Reputation: 1031

you should experiment with css "mix-blend-mode"

In your case css will look like:

  background-color: #fff;
  color: #000;
  mix-blend-mode: screen;

You can check the demo: 

body{
  background: url('https://i.sstatic.net/QqRWG.jpg')
}
p{
  background-color: #fff;
  color: #000;
  mix-blend-mode: screen;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  font-family: arial;
  font-size: 10em;
  margin: 0;
  line-height: 100vh;
  text-align: center;
}
<p>404</p>

Upvotes: 0

Related Questions