效果如下,文字随着背景明暗变化
<svg viewBox="0 0 660 300"> <defs> <filter id="comform"> <feImage :href="image1" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none" result="ORIGIN_IMAGE"></feImage> <feColorMatrix type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.9 0" in="ORIGIN_IMAGE" result="GRAY_IMAGE"></feColorMatrix> <feDisplacementMap in="SourceGraphic" in2="GRAY_IMAGE" scale="15" xChannelSelector="R" yChannelSelector="R" result="TEXTURED_TEXT"></feDisplacementMap> <feBlend in="BG" in2="OPACITY_TEXT" MODE="multiply" result="BLENDED_TEXT"></feBlend> </filter> </defs> <image href="../../assets/moon.png" x="0" y="0" width="100%" height="100%" preserveAspectRatio="none"></image> <text width="50%" height="50%" x="60" y="120" font-size="5em" font-weight="bold" text-anchor="left" fill="#000" :filter="`url(#comform)`">文字贴合背景</text> </svg>
<script lang="ts"> import { ref } from 'vue'; import { ElMessage } from 'element-plus'; import image1 from '/@/assets/moon.png'; export default { setup() { const back = () => { window.history.back(); }; return { back, image1, }; }, }; </script>
代码地址:https://gitee.com/yuexiayunsheng/vue3learn/blob/master/src/views/cssEffect/TextFitsBackground.vue