有时候制作小程序需要一点动态的效果。 话不多说直接上图看效果。
话说实现方式很简单。
首先准备一张背景图。
然后准备一张波浪图:
下载:点我下载
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; 这种技巧可以套用任意一张背景图用来做波浪图。
原文地址:https://www.cnblogs.com/xochin001/p/11267159.html
时间: 2024-10-08 23:05:57