当前位置：首页 > news >正文

【css特效】：实现背景色跟随图片相近色处理

news 2025/9/22 9:36:44

第一章效果

第二章源码

第一章效果

第二章源码

这里小编直接上代码（复制即可使用），涉及到的技术小编会在最后说明！

<script setup>
import { ref } from 'vue'
import ColorThief from 'colorthief'
import tool from '@/utils/tool'
import { cs } from '@/utils/cs'const colorThief = new ColorThief()
const dom = ref(null)
// 本地图片
const source = ref(['images/Color/1.jpg','images/Color/2.jpg','images/Color/3.jpg','images/Color/4.jpg'
])
// 用随机图片网址生成的图片
// const source = ref([
//   'https://picsum.photos/200/300?i=1',
//   'https://picsum.photos/200/300?i=2',
//   'https://picsum.photos/200/300?i=3',
//   'https://picsum.photos/200/300?i=4'
// ])const hoverIndex = ref(-1) // 鼠标移入的图片索引
const handleMouseEnter = async (e, idx) => {// 鼠标移入事件hoverIndex.value = idx // 记录当前鼠标移入的图片索引console.log('元素', e.target) // 获取当前鼠标移入的图片元素const colors = await colorThief.getPalette(e.target, 3) // 获取图片的3个主要颜色console.log('颜色数组', colors) // 打印颜色数组const [c1, c2, c3] = colors.map((c) => `rgb(${c[0]}, ${c[1]}, ${c[2]})`) // 将颜色数组转换为rgb格式// 设置渐变背景dom.value.style.setProperty('--grad',`linear-gradient(135deg, ${c1}, ${c2}, ${c3})`)
}const handleMouseLeave = () => { // 鼠标移出事件dom.value.style.setProperty('--grad', `#fff`) // 移出时恢复默认背景hoverIndex.value = -1 // 重置当前鼠标移入的图片索引
}
</script><template><div:class="cs('main','w-full h-full','flex justify-start items-center flex-wrap gap-20px')"ref="dom"><img:src="tool.viteRequire(item)"@mouseenter="handleMouseEnter($event, index)"@mouseleave="handleMouseLeave($event)"alt=""v-for="(item, index) in source":key="index"class="img_item h-1/2":style="{opacity: hoverIndex === -1 ? 1 : hoverIndex === index ? 1 : 0.2}"/><!-- <imgcrossorigin="anonymous"@mouseenter="handleMouseEnter($event, index)"@mouseleave="handleMouseLeave($event)":src="item"alt=""v-for="(item, index) in source":key="index"class="img_item h-1/2":style="{opacity: hoverIndex === -1 ? 1 : hoverIndex === index ? 1 : 0.2}"/> --></div>
</template><style lang="scss">
.main {background: var(--grad);.img_item {width: calc(100% / 2 - 20px);}
}
</style>