<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="renderer" content="webkit|ie-comp|ie-stand" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<meta http-equiv="Cache-Control" content="no-transform"/>
<title>CSS图片上加渐变色效果底部SVG配置PATH加立体遮盖效果</title>
</head>
<style type="text/css">
.hdhMain{float:left;width:100%;height:840px;background-image: linear-gradient(106deg, #00E728 0%, #caffdc 89%);}
.hdhImg{
float:left;width:100%;height:100%;background:url(http://www.tcmthai.co.th/images/banner_1.jpg) ;
background-position: center center;
background-repeat: no-repeat;
background-size: cover;
opacity: 0.5;
transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
}
.hdhcmsfillbottomwhite{
fill: #fff;
-webkit-transform-origin: center;
-ms-transform-origin: center;
transform-origin: center;
-webkit-transform: rotateY(0deg);
transform: rotate(180deg);
}
</style>
<body>
<div>
<div>
</div>
<svg style="position:relative;top:-110px;left:0px;" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1000 100" preserveAspectRatio="none">
<path d="M738,99l262-93V0H0v5.6L738,99z"></path>
</svg>
</div>
</body>
</html>
查看更多关于CSS图片上加渐变色效果底部SVG配合PATH加立体遮盖效果的详细内容...