Css实现图片斜切效果
css mask的原理：只会把遮罩图里透明像素所对应的原图部分进行隐藏。
渐变图作为mask，置于另一张图片上面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"...
css mask的原理：只会把遮罩图里透明像素所对应的原图部分进行隐藏。
渐变图作为mask，置于另一张图片上面。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
<style type="text/css">
#mask {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: url("http://www.duanlonglong.com/images/defaultpic.gif");
background-size: cover;
-webkit-mask-image: linear-gradient(120deg, transparent 50%, white 50%);
}
</style>
</head>
<body>
<div id="images">
<img src="http://www.duanlonglong.com/images/defaultpic.gif">
<div id="mask"></div>
</div>
</body>
</html>
效果图：
- 发表于 2020-07-07 11:51
- 阅读 ( 691 )
- 分类：web前端开发
