什么是斜线拼接
效果图下面所示：
这是两张图片，通过css遮罩形成的。
要实现这个特性，就需要用到CSS遮罩和线性渐变。—— CSS mask & linear gradient
代码实现
主体
body主体：
html
1 | <div class="img-container"> |
2 | <div class="img-left"></div> |
3 | <div class="img-right"></div> |
4 | </div> |
然后是css主体：
css
1 | .img-container { |
2 | position: relative; |
3 | width: 800px; |
4 | height: 800px; |
5 | border: 5px solid #40bcff; |
6 | } /* 定义边框 */ |
7 | .img-left,.img-right { |
8 | background-size: cover; |
9 | width: 100%; |
10 | height: 400px; |
11 | } |
12 | .img-left { |
13 | background: url("images/img1.png"); |
14 | } |
15 | .img-right { |
16 | background: url("images/img2.png"); |
17 | } |
效果如下：
斜线
把img-right的背景换成一个带有“斜线”的图，这个不用图片，css渐变就可以实现，
css
1 | .img-right{ |
2 | background: -webkit-linear-gradient(left top, blue 50%, white 50%); |
3 | } |
然后将背景换成图片，渐变图作为mask
css
1 | .img-right{ |
2 | background: url(img/img2.jpg); |
3 | -webkit-mask-image: -webkit-linear-gradient(left top, blue 50%, white 50%); |
4 | } |
但是这么做了却发现并没有变化，
这是因为css mask的原理是，他只会把遮罩图里透明像素所对应的原图部分进行隐藏，而设置的渐变图是完全不透明的（设置的为蓝白色相间），所以没有遮罩效果，把蓝色改为透明试试。
css
1 | .img-right{ |
2 | background: url(img/img2.jpg); |
3 | -webkit-mask-image: -webkit-linear-gradient(left top, transparent 50%, white 50%); |
4 | } |
成了！
层叠
最后把第二张图放在第一张的上面，由于下面的图左半面是透明的，所以不会遮挡图一
css
1 | .img-right{ |
2 | position: absolute; |
3 | left: 0; |
4 | top: 0; |
5 | } |
最后的css代码：
css
1 | .img-container { |
2 | position: relative; |
3 | width: 800px; |
4 | height: 400px; |
5 | border: 5px solid #40bcff; |
6 | } |
7 | .img-left,.img-right { |
8 | background-size: cover; |
9 | width: 100%; |
10 | height: 400px; |
11 | } |
12 | .img-left { |
13 | background: url("images/img1.png"); |
14 | } |
15 | .img-right { |
16 | position: absolute; |
17 | left: 0; |
18 | top: 0; |
19 | background: url("images/img2.png"); |
20 | -webkit-mask-image: -webkit-linear-gradient(left top, transparent 50%, white 50%); |
21 | } |
