CODEWITHSUNDEEP
htmlcss
madhu kumar
madhu kumar

Reputation: 810

How to clip inside a box in css?

I have a background image of many colors. Header is a white box and i need to write text over this box. So what happens is through this box, text is clipped and background is seen through this white box. How to do this?

enter image description here

Upvotes: 0

Views: 278

Answers (3)

vals
vals

Reputation: 64164

You cab do that with background clip: text, but you have only support in webkit

CSS

body {
    height: 100%;
    background: linear-gradient(0deg, red,white, blue, pink, yellow, green);
}

h3 {
    background-image: inherit;  
    -webkit-background-clip: text;
    color: transparent;
    font-size: 80px;
    top: 0px;
    position: relative;
    margin-top: 0px;
    padding: 0px;
}

h3:after {
    content: "";
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0px;
    left: 0px;
    background-color: white;
    z-index: -1;
}

fiddle

Upvotes: 2

dehood
dehood

Reputation: 136

I got your point! Its simple! You can do this with images.

Imagine there is a background colors, and you simply put another div style with image which contains white background with see-trough text! Use photoshop ;)

And also, check this css3 how to do multiple backgrounds in one div:

#box_over{
    background:url(clipped_text.png), url(background.png);
    background-size:100% 100%;
    background-repeat:no-repeat;
}

Upvotes: 0

dehood
dehood

Reputation: 136

Simply use this css code on box:

#box_over {background-color:rgba(255,255,255,0.1);}

Where is 0.1 there is background opacity. You can increase or decrease opacity.

Upvotes: 0

Related Questions