html 使用没有javascript的svg掩码将一个图像掩盖在另一个上面

Posted 2021-05-11

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 使用没有javascript的svg掩码将一个图像掩盖在另一个上面相关的知识，希望对你有一定的参考价值。

body {
    padding: 0;
    margin: 0;
    border: 20px solid #03374c;
}

.main-hero {
    position: relative;
    height: 90vh;
    min-height: 600px;
}

.hero-bg-orng {
    clip-path: url(#clipping) 50%;
    -webkit-clip-path: url(#clipping);
    text-align: center;
    position: relative;
    background-repeat: no-repeat;
    background-image: url('bg-main-orange.jpg');
    background-position: center top;
    background-size: cover;
    fill: #ff7e11;
    width: 100%;
    height: 100%;
}

.hero-text-label {
    top: 35vh;
    padding-top: 16px;
    position: absolute;
    z-index: 100;
    height: auto;
    margin: auto;
    width: 100%;


}

.hero-text-label h1{
    color: #FFF;
    width: 100%;
    line-height: 4.6rem;
    font-size: 5rem;
    font-weight: 100;
    text-align: center;
    margin: 0;
    padding: 0;
}


.hero-text-label h1.fist-line {
    font-size: 5rem;
}
.hero-text-label h1.second-line {
    font-size: 4.2rem;
}

#clipping {
    width: 100%;
    /*width 445 will use 1/2 of it in css, will be recalculated for all elements, 445/2=222px*/
    transform: translateX(calc(50vw - 240px)) translateY(35vh); /*will work in oll modern browsers*/
    fill: #ff7e11;
    text-align: center;
}

.hero-bg {
    position: absolute;
    top:0;
    width: 100%;
    height: 100%;

}


.hero-text {
    position: relative;
    display: block;
    z-index: 10;
    text-align: center;
}

.svg-mask {
    position: absolute;
    display: block;
    margin: auto;
}

.bg-blue {
    position: absolute;
    top:0;
    width: 100%;
    height: 100%;
    background-color: #007b8a;
    background-repeat: no-repeat;
    background-image: url('bg-main-blue.jpg');
    background-position: center top;
    background-size: cover;
    margin-bottom: 250px;
    z-index: 1;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>test</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
<!-- SVG markup for the mask -->
    <svg class="svg-mask" width="100%" height="178px" >
        <defs>
            <!--width 445 -->
            <clipPath id="clipping"  text-anchor="middle">
                <path d="M0.000,-0.000 L0.000,95.000 L46.000,96.000 L46.000,178.000 L397.000,170.000 L397.000,106.000 L444.656,107.000 L444.656,7.000 L0.000,-0.000 Z"/>
            </clipPath>
        </defs>
    </svg>

<!--end of inlined svg-->
    <div class="main-hero">
        <div class="hero-text-label">
            <h1 class="fist-line">Invest with</h1>
            <h1 class="second-line">CBOE Vest</h1>
        </div>
        <div class="hero-text hero-bg-orng">
            <!--or place text here it will be masked-->
        </div>
        <div class="bg-blue"></div>
    </div>
</body>
</html>

以上是关于html 使用没有javascript的svg掩码将一个图像掩盖在另一个上面的主要内容，如果未能解决你的问题，请参考以下文章

将带有掩码和符号的 SVG 转换为纯 SVG 文件？

SVG注入的后备，没有Javascript / SVG支持

如何使用javascript动态更改html中svg的文本内容

如果存在媒体查询，则 SVG 掩码不起作用

具有多个视频源的SVG掩码？

Javascript 函数未在单击时定义 SVG 元素