图片填充容器,如何描述

【图片需要完全填充/拉伸以适应容器尺寸,不保持原始比例,使用 object-fit: fill 属性实现】
效果:
在这里插入图片描述
代码案例:

<!DOCTYPE html>
<html lang="zh-CN">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>图片悬停渐变背景效果</title><style>* {margin: 0;padding: 0;box-sizing: border-box;}body {font-family: Arial, sans-serif;min-height: 100vh;display: flex;flex-direction: column;position: relative;background-color: #f0f0f0;overflow-x: hidden;}.background-container {position: fixed;top: 0;left: 0;width: 100%;height: 100%;z-index: -1;transition: all 0.5s ease-in-out;}.background-image {position: absolute;top: 0;left: 0;width: 100%;height: 100%;background-size: cover;background-position: center;filter: blur(20px);transition: opacity 0.5s ease;opacity: 0;}.gradient-overlay {position: absolute;top: 0;left: 0;width: 100%;height: 100%;transition: opacity 0.5s ease;opacity: 0.85;}.content-wrapper {position: relative;z-index: 1;}.container {width: 650px;margin: 50px auto;display: grid;grid-template-columns: 1fr 1fr;grid-template-rows: 1fr 1fr;gap: 20px;}.image-container {width: 300px;height: 200px;overflow: hidden;border-radius: 8px;cursor: pointer;box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);transition: transform 0.3s ease, box-shadow 0.3s ease, opacity 0.5s ease;background: white;position: relative;z-index: 2;}.image-container:hover {transform: translateY(-10px) scale(1.05);box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2);}.image-container img {width: 100%;height: 100%;object-fit: fill;transition: transform 0.5s ease;}.image-container:hover img {transform: scale(1.05);}/* 新增:非激活状态的图片透明度 */.image-container.fade {opacity: 0.3;transform: scale(0.95);z-index: 1;}h1 {text-align: center;margin-top: 50px;margin-bottom: 30px;color: #333;transition: color 0.5s ease;text-shadow: 0 2px 4px rgba(0,0,0,0.1);}#canvas {display: none;}</style>
</head>
<body><div class="background-container"><div class="background-image" id="bg-image"></div><div class="gradient-overlay" id="gradient-overlay"></div></div><div class="content-wrapper"><h1>悬停图片查看效果</h1><div class="container"><div class="image-container"><img src="1 (1).jpeg" alt="图片1" data-src="1 (1).jpeg"></div><div class="image-container"><img src="1 (1).jpg" alt="图片2" data-src="1 (1).jpg"></div><div class="image-container"><img src="1 (1).png" alt="图片3" data-src="1 (1).png"></div><div class="image-container"><img src="1 (2).jpeg" alt="图片4" data-src="1 (2).jpeg"></div></div></div><!-- 隐藏的canvas元素用于分析图片颜色 --><canvas id="canvas"></canvas><script>document.addEventListener('DOMContentLoaded', function() {const imageContainers = document.querySelectorAll('.image-container');const bgImage = document.getElementById('bg-image');const gradientOverlay = document.getElementById('gradient-overlay');const heading = document.querySelector('h1');const canvas = document.getElementById('canvas');const ctx = canvas.getContext('2d');// 提取图片多个区域的颜色function extractColors(img) {// 设置canvas大小const width = 100;const height = 100;canvas.width = width;canvas.height = height;// 在canvas上绘制图片ctx.drawImage(img, 0, 0, width, height);// 从图片的不同区域提取颜色const topLeft = getColorFromRegion(0, 0, width/3, height/3);const topRight = getColorFromRegion(2*width/3, 0, width/3, height/3);const bottomLeft = getColorFromRegion(0, 2*height/3, width/3, height/3);const bottomRight = getColorFromRegion(2*width/3, 2*height/3, width/3, height/3);const center = getColorFromRegion(width/3, height/3, width/3, height/3);return {topLeft,topRight,bottomLeft,bottomRight,center};}// 获取指定区域的平均颜色function getColorFromRegion(x, y, width, height) {const imageData = ctx.getImageData(x, y, width, height);const data = imageData.data;let r = 0, g = 0, b = 0;const pixelCount = data.length / 4;for (let i = 0; i < data.length; i += 4) {r += data[i];g += data[i + 1];b += data[i + 2];}r = Math.floor(r / pixelCount);g = Math.floor(g / pixelCount);b = Math.floor(b / pixelCount);return { r, g, b };}// 计算颜色亮度function getBrightness(r, g, b) {return (r * 299 + g * 587 + b * 114) / 1000;}// 创建带透明度的CSS渐变字符串function createGradient(colors) {const { topLeft, topRight, bottomLeft, bottomRight, center } = colors;// 添加0.85的透明度到每个颜色值return `linear-gradient(135deg, rgba(${topLeft.r}, ${topLeft.g}, ${topLeft.b}, 0.85) 0%, rgba(${center.r}, ${center.g}, ${center.b}, 0.85) 50%, rgba(${bottomRight.r}, ${bottomRight.g}, ${bottomRight.b}, 0.85) 100%),linear-gradient(45deg,rgba(${bottomLeft.r}, ${bottomLeft.g}, ${bottomLeft.b}, 0.85) 0%,rgba(${center.r}, ${center.g}, ${center.b}, 0.85) 50%,rgba(${topRight.r}, ${topRight.g}, ${topRight.b}, 0.85) 100%)`;}// 定义默认渐变const defaultGradient = 'linear-gradient(135deg, rgba(245, 247, 250, 0.85) 0%, rgba(195, 207, 226, 0.85) 100%)';// 淡化其他图片function fadeOtherImages(currentContainer) {imageContainers.forEach(container => {if (container !== currentContainer) {container.classList.add('fade');}});}// 恢复所有图片function resetAllImages() {imageContainers.forEach(container => {container.classList.remove('fade');});}// 为每个图片容器添加事件监听器imageContainers.forEach(container => {const img = container.querySelector('img');// 预加载图片并处理颜色const preloadImg = new Image();preloadImg.crossOrigin = "Anonymous";preloadImg.src = img.src;preloadImg.onload = function() {// 提取并存储多个颜色img.dataset.colors = JSON.stringify(extractColors(preloadImg));};container.addEventListener('mouseenter', function() {// 淡化其他图片fadeOtherImages(container);if (img.dataset.colors) {const colors = JSON.parse(img.dataset.colors);const centerColor = colors.center;const brightness = getBrightness(centerColor.r, centerColor.g, centerColor.b);// 设置模糊背景图片bgImage.style.backgroundImage = `url(${img.getAttribute('data-src')})`;bgImage.style.opacity = '1';// 创建渐变效果gradientOverlay.style.background = createGradient(colors);// 根据背景亮度调整标题颜色if (brightness < 128) {heading.style.color = '#fff';heading.style.textShadow = '0 2px 4px rgba(0,0,0,0.3)';} else {heading.style.color = '#333';heading.style.textShadow = '0 2px 4px rgba(255,255,255,0.3)';}}});container.addEventListener('mouseleave', function() {// 恢复所有图片resetAllImages();// 当鼠标离开时,恢复初始状态bgImage.style.opacity = '0';gradientOverlay.style.background = defaultGradient; // 恢复默认渐变heading.style.color = '#333';heading.style.textShadow = '0 2px 4px rgba(0,0,0,0.1)';});});// 初始状态 - 设置默认渐变gradientOverlay.style.background = defaultGradient;});</script>
</body>
</html> 

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/35002.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

缓存和客户端数据存储体系(Ark Data Kit)--- 应用数据持久化(首选项持久化、K-V、关系型数据库)持续更新中...

Core File Kit做怎删改查操作不便&#xff0c;用Ark Data Kit。 功能介绍 ArkData &#xff08;方舟数据管理&#xff09;为开发者提供数据存储、数据管理和数据同步能力&#xff0c;比如联系人应用数据可以保存到数据库中&#xff0c;提供数据库的安全、可靠以及共享访问等管…

RUOYI框架在实际项目中的应用三:Ruoyi微服务版本-RuoYi-Cloud

如需观看Ruoyi框架的整体介绍&#xff0c;请移步&#xff1a;RUOYI框架在实际项目中的应用一&#xff1a;ruoyi简介 一、Ruoyi微服务版本-Ruoyi微服务版本 1、官方资料 1&#xff1a;代码地址&#xff1a;https://gitee.com/y_project/RuoYi-Cloud.git 2&#xff1a;文档介绍…

windbg集成python环境(pykd)

背景: 调试FPU指令过程时&#xff0c;需要一直跟踪FPU Status寄存器TOP字段(ST寄存器对应的BC寄存器)&#xff0c;TOP寄存器位于FPU Status[13:11]&#xff0c;这种转换过程并非一目了然(如下图)&#xff1a; [Disassembly窗口fld指令执行后&#xff0c;Registers窗口中fpsw的…

微信小程序threejs三维开发

微信小程序threejs开发 import * as THREE from three; const { performance, document, window, HTMLCanvasElement, requestAnimationFrame, cancelAnimationFrame, core, Event, Event0 } THREE .DHTML import Stats from three/examples/jsm/libs/stats.module.js; im…

【算法】双指针、递归与回溯、排序、查找

⭐️个人主页&#xff1a;小羊 ⭐️所属专栏&#xff1a;Linux 很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~ 目录 持续更新中...1、双指针移动零复写零快乐数长度最小的子数组dd爱框框 2、递归与回溯3、排序算法4、查找算法 持续更新中… 1、双指…

How to install cangjie on Linux mint 22.1

概述 仓颉编程语言是一款面向全场景智能的新一代编程语言&#xff0c;主打原生智能化、天生全场景、高性能、强安全。主要应用于鸿蒙原生应用及服务应用等场景中&#xff0c;为开发者提供良好的编程体验。 今天&#xff0c;我们介绍一下仓颉语言在Linux mint 22.1上的安装。 …

杰理可视化SDK-手机三方通话控制

杰理可视化SDK-手机三方通话控制 手机三方通话功能杰理SDK三方通话控制SDK三方通话状态获取SDK三方通话处理 手机三方通话功能是手机常用的功能之一。本篇文章简单介绍了杰理可视化SDK在蓝牙耳机应用中&#xff0c;当手机存在三方通话来电或正在进行三方通话时&#xff0c;蓝牙…

【二分算法】-- 寻找旋转排序数组中的最小值

文章目录 1. 题目2. 题目解析3. 代码 1. 题目 在线oj 2. 题目解析 解法一&#xff1a;暴力查找最小值 时间复杂度&#xff1a;0(N) 解法二&#xff1a;二分查找算法 【二段性】&#xff1a; A~B&#xff1a;nums[i] > nums[i 1] C~D&#xff1a;nums[i] < nums[i…

音视频入门基础:RTCP专题(1)——RTCP官方文档下载

一、引言 实时传输控制协议&#xff08;Real-time Transport Control Protocol或RTP Control Protocol或简写RTCP&#xff09;是实时传输协议&#xff08;RTP&#xff09;的一个姐妹协议。RTCP由《RFC 3550》定义&#xff08;取代废弃的《RFC 1889》&#xff09;。RTP使用一个…

OrioleDB: 新一代PostgreSQL存储引擎

PostgreSQL 12 引入了可插拔式的表存储方法接口&#xff0c;允许为不同的表选择不同的存储机制&#xff0c;例如用于 OLTP 操作的堆表&#xff08;HEAP、默认&#xff09;、用于 OLAP 操作的列式表&#xff08;Citus&#xff09;&#xff0c;以及用于超快速搜索处理的内存表。 …

1.5 Spring Boot项目打包和运行

本文介绍了如何使用Spring Boot进行项目打包和运行。首先&#xff0c;讲解了如何将Spring Boot项目打包为可执行的JAR包&#xff0c;并直接运行&#xff0c;无需部署到外部Web服务器。接着&#xff0c;介绍了如何将项目打包为WAR包&#xff0c;以便部署到Web容器中&#xff0c;…

2.7 滑动窗口专题:串联所有单词的子串

LeetCode 30. 串联所有单词的子串算法对比分析 1. 题目链接 LeetCode 30. 串联所有单词的子串 2. 题目描述 给定一个字符串 s 和一个字符串数组 words&#xff0c;words 中所有单词长度相同。要求找到 s 中所有起始索引&#xff0c;使得从该位置开始的连续子串包含 words 中所…

vue中,watch里,this为undefined的两种解决办法

提示&#xff1a;vue中&#xff0c;watch里&#xff0c;this为undefined的两种解决办法 文章目录 [TOC](文章目录) 前言一、问题二、方法1——使用function函数代替箭头函数()>{}三、方法2——使用that总结 前言 ‌‌‌‌‌尽量使用方法1——使用function函数代替箭头函数()…

uniapp移动端图片比较器组件,仿英伟达官网rtx光追图片比较器功能

组件下载地址&#xff1a;https://ext.dcloud.net.cn/plugin?id22609 已测试h5和微信小程序&#xff0c;理论支持全平台 亮点&#xff1a; 简单易用 使用js计算而不是resize属性&#xff0c;定制化程度更高 组件挂在后可播放指示线动画&#xff0c;提示用户可以拖拽比较图片…

SDL3 游戏开发 Windows 环境搭建

SDL3 游戏开发 Windows 环境搭建 一、准备工作1.1 必备工具与库安装1.1.1 CMake1.1.2 MinGW-w641.1.3 Ninja1.1.4 Git1.1.5 SDL3 及扩展库1.1.6 VSCode 及插件 二、配置VSCode项目并验证环境2.1 创建测试源文件2.2 编写CMakeLists.txt文件和CMakePresets.json2.2.1 使用VSCode的…

【sql靶场】第13、14、17关-post提交报错注入保姆级教程

目录 【sql靶场】第13、14、17关-post提交报错注入保姆级教程 1.知识回顾 1.报错注入深解 2.报错注入格式 3.使用的函数 4.URL 5.核心组成部分 6.数据编码规范 7.请求方法 2.第十三关 1.测试闭合 2.列数测试 3.测试回显 4.爆出数据库名 5.爆出表名 6.爆出字段 …

esxi,vcenter6.0安装指导

前言 esxi6.0安装和esxi6.7步骤基本一样&#xff0c;可参考vmware esxi vcenter6.7安装教程&#xff08;dell&#xff09; 环境依赖以及安装包 esxi6.0安装包vcenter6.0安装不同于6.7&#xff0c;6.5通过导入ova模版安装&#xff0c;需要安装在windows server 2008或者windo…

BigFoot Decursive lua

BigFoot Decursive lua 一键驱散脚本 国际化 ogg语音提示 初始化

2024山东大学计算机复试上机真题

2024山东大学计算机复试上机真题 2024山东大学计算机复试机试真题 历年山东大学计算机复试上机真题 历年山东大学计算机复试机试真题 在线评测&#xff1a;传动门&#xff1a;pgcode.cn 最长递减子序列 题目描述 输入数字 n&#xff0c;和 n 个整数&#xff0c;输出该数字…

【AI News | 20250316】每日AI进展

AI Repos 1、ReActMCP 将网络搜索能力集成到AI助手中的一个MCP服务&#xff1a;ReActMCP Web Search&#xff0c;相当于给AI装了个搜索引擎&#xff0c;可以实时查找最新的内容。它基于Exa API执行基本和高级网络搜索&#xff0c;高级搜索比如限制搜索的网站范围、指定日期范围…