CSS implementation of image slash stitching

Look at the title estimate is also difficult to know what is a slash stitching, in order to get into the business quickly, here to save a heap of nonsense ....

This article will let you know how to use the CSS3 property to achieve the following picture effect.

Of course, use the CSS3 property mask & linear gradient. This is a very thorough understanding of the use of these two properties.

First, to show two pictures

<div class= "wrapper" >

<div class= "left" ></div>

<div class= "right" ></div>

</div>

. wrapper{

position:relative;

width:360px;

border:5px solid #fff;

}

. left{

Background:url (left-img.png);

Background-size:cover;

width:100%;

height:248px;

}

. right{

Background:url (right-img.png);

Background-size:cover;

width:100%;

height:248px;

}

The result is this:

This is not to show two pictures!!

According to the investigation, as long as the front-end students, this time 100% people will say, so easy~~, yes.

Yes, I just want to say to you, as long as you understand the use of the linear gradient attribute, everything is simple.

go~~~

Two, draw a slash

In order to achieve diagonal stitching, you have to have a slash it? Replace the girl below with a diagonal chart. Ah!! I'm not going to change ~~.

. right{

Background:-webkit-linear-gradient (left Top, Blue 50%, #ddd 50%);

}

The result is this:

Three, change back to the beautiful figure

Replace the background with the real beauty, the gradient as mask.

. right{

-webkit-mask-image:-webkit-linear-gradient (left Top, Blue 50%, #ddd 50%);

}

This time back, everyone is happy, because compared to the study of beauty, if two can simultaneously, it is not more beautiful ~~~~~ haha

The result is this:

Ah, not to be covered, meet this general matter not urgent, I can only say, the problem still needs elaboration.

The principle of mask is that it hides only the original portions of the transparent pixels in the mask, and our gradients are completely opaque. So there's no masking effect. Get one, come on.

. right{

-webkit-mask-image:-webkit-linear-gradient (left top, transparent 50%, #ddd 50%);

}

The result turns out this way:

Well, now you know how important it is to understand the application of a property, it is said to understand an attribute in Beijing is more important than buying a house ~~~~~~~~

Four, stacked two pictures

. right{

Position:absolute;

left:0;

top:0;

Background:url (right-img.png);

Background-size:cover;

width:100%;

height:248px;

-webkit-mask-image:-webkit-linear-gradient (left top, transparent 50%, white 50%);

}

The result is the shape of the first picture, simple, yes.

Summary: There is a sentence how to say, "thinking is more important than diligence", refueling ~ ~ ~ ~

More front-end resources pay attention to the public number: Talk together and learn to progress together

CSS implementation of image slash stitching