标签：img 直接 context cti out scss shadow padding inf
有时候制作小程序需要一点动态的效果。 话不多说直接上图看效果。
话说实现方式很简单。
首先准备一张背景图。
然后准备一张波浪图：
下载：点我下载
vue的代码如下：
<template>
<div>
<section class="sec-nav">
<navigationBar :title="videoTitle" :titleColor="‘black‘"></navigationBar>
</section>
<div class="content">
<div class="about-bg">
<image src="https://image.weilanwl.com/gif/wave.gif" mode="scaleToFill" class="about-img"></image>
</div>
</div>
</div>
</template>
<script>
接着CSS代码如下：
<style lang="scss">
.content {
background-color:#f8f8f9;
width: 100vw;
height: 200vh;
box-sizing: border-box;
display: flex;
padding-top: 0rpx;
flex-direction: column;
justify-content: flex-start;
.about-bg{
background-image: url(http://www.jingsoftware.com:3316/chen_xcy/img/context/aboutus.jpg);
width:100vw;
height:300rpx;
background-size: cover;
display: flex;
justify-content: center;
padding-top: 40rpx;
overflow: hidden;
position: relative;
flex-direction: column;
align-items: center;
color: #fff;
font-weight: 300;
text-shadow: 0 0 3px rgba(0, 0, 0, 0.3);
.about-img {
position: absolute;
width: 100%;
bottom: 0px;
left: 0;
z-index: 99;
mix-blend-mode: screen;
height: 100rpx;
}
}
}
</style>
这里的关键就是这段话：
mix-blend-mode: screen;
这种技巧可以套用任意一张背景图用来做波浪图。
标签：img 直接 context cti out scss shadow padding inf
原文地址：https://www.cnblogs.com/xochin001/p/11267159.html
