使用CSS遮罩与CSS线性渐变实现图片的斜线拼接

2017-01-14 19:51:05来源:CSDN作者:zhouziyu2011人点击

css mask的原理:只会把遮罩图里透明像素所对应的原图部分进行隐藏。

渐变图作为mask,置于另一张图片上面。

<div id="images">    <img src="images/img1.jpg">      <div id="mask"></div></div>
#mask {    position: absolute;    left: 0;    top: 0;    width: 100%;    height: 100%;    background: url("images/img2.jpg");    background-size: cover;    -webkit-mask-image: linear-gradient(120deg, transparent 50%, white 50%);}

最新文章

123

最新摄影

微信扫一扫

第七城市微信公众平台