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

前端,CSS,背景颜色跟随轮播图片改变而改变(附源码)

首先看效果!
比如轮播图时红色,那么背景的底色也是红色,轮播图时黄色,背景的底色也是黄色,这就是根据轮播图的图片切换,而改变背景颜色随轮播图颜色一致

在这里插入图片描述
在这里插入图片描述

话不多说,直接上代码!非常简单

轮播图代码就不放上去了,直接使用插件 swiper ,选择你喜欢的版本 就可以了
在轮播图的位置 放置一个 div

<!-- 完事,对!你没有看错 只需要一个div 来放置图片就ok啦! -->
<!-- 
display-{{count}} : 此处我的background-image 是循环出来的 
是为了 轮播图中 点击切换按钮的时候,切换图片,背景色也跟着切换
这个逻辑也很简单,通过 swiper插件 可以获取到切换的时候,当前的图片索引,和上一张的图片索引,
然后通过  display-{{count}} 做显引操作 display:none/display: block
--><div class="backgroundChange display-{{count}}" style="background-image: url('{{poster.src}}'); display: none;">
<!-- CSS  -->
<style>
.backgroundChange{height: 200px;position: absolute;width: 100%;opacity: .3;filter: blur(100px);
}
</style>

只需要简短的代码,就可以完成上面的效果,是不是很简单!!!

在这里插入图片描述

相关文章:

前端,CSS,背景颜色跟随轮播图片改变而改变(附源码)

首先看效果&#xff01; 比如轮播图时红色&#xff0c;那么背景的底色也是红色&#xff0c;轮播图时黄色&#xff0c;背景的底色也是黄色&#xff0c;这就是根据轮播图的图片切换&#xff0c;而改变背景颜色随轮播图颜色一致 话不多说&#xff0c;直接上代码&#xff01;非常简…...

对文件夹内的所有图像进行随机调整对比度和应用高斯滤波

import os import random from PIL import Image, ImageEnhance, ImageFilter# 输入和输出文件夹路径 input_folder rE:\深度学习数据集 output_folder rE:\深度学习数据集\对比度、高斯滤波# 确保输出文件夹存在&#xff0c;如果不存在则创建 if not os.path.exists(output_…...

ios上架上传构建版本的windows工具

ios上架的必要步骤&#xff0c;是将打包好的二进制ipa文件&#xff0c;上传到app store的构建版本里&#xff0c;苹果并没有提供上传构建版本的工具&#xff0c;这里我介绍下windows下上传构建版本的方案。 下面说下上传的基本步骤&#xff1a; 第一步&#xff0c;上传前要先…...

arcgis js api 4.x加载geoserver发布的地方坐标系(自定义坐标系)的wms服务

问题描述&#xff1a;之前研究过arcgis js api 4.x加载arcgis server 发布的地方坐标系的wms服务&#xff0c;后来研究出来能正常加载了&#xff0c;想了解的可以看我之前的博客。但是一直困于加载geoserver发布的地方坐标系的wms服务&#xff0c;一直都是用的WMSLayer这个调用…...

人工智能的发展方向:探索智能未来的无限可能

原创 | 文 BFT机器人 人工智能&#xff0c;简称AI&#xff0c;是一门专注于研究计算机如何能像人类一样思考、学习和解决问题的科学。它的创造初衷是构建一个智能系统&#xff0c;能模仿、模拟甚至实现人工智能的各种功能和行为&#xff0c;随着科技的持续进步&#xff0c;人工…...

【23秋软工第7周作业】项目选题

一、如何提出靠谱的项目建议&#xff0c;参见邹欣老师的博客&#xff1a;http://www.cnblogs.com/xinz/archive/2010/12/01/1893323.html 二、选题来源指导&#xff1a; 有创意和独创性的小项目 跟智能数据处理相关 候选题目可以参见课程主页 三、具体汇报任务&#xff1a; …...

谷歌云的利润增长才刚刚开始

来源&#xff1a;猛兽财经 作者&#xff1a;猛兽财经 总结&#xff1a; &#xff08;1&#xff09;自从Google Cloud(谷歌云&#xff09;今年开始盈利以来&#xff0c;投资者都在怀疑这种盈利能力能否持续下去。 &#xff08;2&#xff09;虽然微软Azure目前在全球的人工智能竞…...

【Golang】简记操作:Centos安装、卸载、升级Golang运行环境

目录 安装 1、根据实际需求选择合适的golang版本 如下图&#xff0c;选择合适的版本&#xff0c;右键复制链接 2、在Centos选择合适的目录下载golang的源文件 3、解压golang的源文件&#xff0c;解压完成即可执行go命令 4、设置golang的全局环境变量&#xff08;/etc/pr…...

开启生成式AI的探索之旅,亚马逊云科技分享生成式AI热门案例

现今&#xff0c;生成式AI为企业争先讨论的热门话题&#xff0c;上云出海为企业转型的重中之重。无论你是行业新贵还是中小企业&#xff0c;探索新的模式、创新迭代业务都是不容忽视的重点&#xff0c;下面就来介绍几个亚马逊云科技帮助企业创新的案例。 开启生成式AI的探索之旅…...

【Python机器学习】零基础掌握IsolationForest集成学习

如何有效地识别异常数据点? 在日常工作和生活中,经常会遇到需要从大量数据中找出异常或者“不一样”的数据点的情况。比如在金融领域,怎样从数以百万计的交易记录中准确地找出可疑的欺诈交易?又或者在电商平台,如何从海量的商品评论中找出那些刷好评或刷差评的异常数据?…...

GNN图神经网络入门

1.为什么会提出图神经网络&#xff1f; 答&#xff1a;为了处理图Graph这种特殊的数据结构。 2.为什么要与神经网络搭上关系&#xff1f; 答&#xff1a;利用神经网络能够拟合任意函数的能力&#xff08;或者理解为强大的为特征变换能力&#xff09;。 3.图神经网络的最终目的是…...

node 第十二天 npm补充 详解package-lock.json在团队协作中的作用

1.npm 是Node的开放式模块登记和管理系统&#xff0c;是Node.js包的标准发布平台&#xff0c;用于Node.js包的发布、传播、依赖控制 2.今天主要说的是package-lock.json在团队协作中的作用(yarn.lock也是一样), 其实在npm5之后和yarn的区别已经很小了 正常项目用哪个都行, 几乎…...

解决Visual studio 未能正确加载...包问题

问题 解决&#xff1a; 菜单: Visual Studio 2019 -> 输入"devenv /resetsettings " 将之前的设置恢复到原始状态。且可以正常使用。理论应该可以使用到其它版本中……...

Baumer工业相机堡盟工业相机如何使用BGAPISDK生成视频(C++)

Baumer工业相机 Baumer工业相机堡盟相机是一种高性能、高质量的工业相机&#xff0c;可用于各种应用场景&#xff0c;如物体检测、计数和识别、运动分析和图像处理 Baumer的万兆网相机拥有出色的图像处理性能&#xff0c;可以实时传输高分辨率图像。此外&#xff0c;该相机还…...

CentOS 搭建本地 yum 源方式 安装 httpd 服务

CentOS 搭建本地 yum 源方式 安装 httpd 服务 修改 yum 源 挂载光驱 mkdir -p /mnt/cdrom mount /dev/cdrom /mnt/cdromvi /etc/fstab追加以下内容&#xff1a; /dev/cdrom /mnt/cdrom iso9660 defaults 0 0手动修改CentOS-Base.repo 备份 yum 源配置文件 mv /etc/yum.re…...

第二篇 渲染框架2.x

简介 整个渲染框架主要包含&#xff1a;用于控制场景中所有渲染节点的渲染状态的流程的RenderFlow。更新渲染数据、写入Buffer的Assembler。暂存数据的RenderData。数据缓冲区的MeshBuffer、quadBuffer、spineBuffer。包含着色器程序和渲染技术的Material。渲染指令数据的装载…...

k8s-----25、资源调度-ResourceQuota资源配额、资源限制limitrange、服务质量QoS

1、ResourceQuota资源配额 1.0 作用 命名空间资源配额。防止公司内部人员对资源的不合理利用。 1.1、为什么需要资源配额 1、作为k8s集群的管理员&#xff0c;知道集群的规模&#xff0c;会合理规划资源&#xff0c;但是使用侧不知道&#xff0c;会导致很多不合理的使用场景…...

Pytorch使用torchvision.datasets.ImageFolder读取数据集,数据集的内容排列状况

当使用torchvision.datasets.ImageFolder读取猫狗数据集时,dataset中存的图片是 猫狗猫狗猫狗猫狗 还是 猫猫猫猫狗狗狗狗 呢? 数据集文件的存放路径如下图 测试代码如下 import torch import torchvisiontransform torchvision.transforms.Compose([torchvision.transform…...

uni-app:引用文件的方法

绝对定位 ①import common from "/utils/common.js" ②import common from "utils/common.js" <template><view></view> </template> <script>import common from "/utils/common.js"export default {data() {ret…...

软件测试必备:如何编写测试用例?

前言 今天想和大家来聊聊测试用例&#xff0c;这篇文章主要是想要写给软件测试小伙伴们的&#xff0c;因为我发现还是有很多小伙伴在遇到写测试用例的时候无从下手&#xff0c;我就想和大家简单的聊聊&#xff0c;这篇文章主要是针对功能测试的哟。 同时&#xff0c;我也准备…...

基于大模型的 UI 自动化系统

基于大模型的 UI 自动化系统 下面是一个完整的 Python 系统,利用大模型实现智能 UI 自动化,结合计算机视觉和自然语言处理技术,实现"看屏操作"的能力。 系统架构设计 #mermaid-svg-2gn2GRvh5WCP2ktF {font-family:"trebuchet ms",verdana,arial,sans-…...

uni-app学习笔记二十二---使用vite.config.js全局导入常用依赖

在前面的练习中&#xff0c;每个页面需要使用ref&#xff0c;onShow等生命周期钩子函数时都需要像下面这样导入 import {onMounted, ref} from "vue" 如果不想每个页面都导入&#xff0c;需要使用node.js命令npm安装unplugin-auto-import npm install unplugin-au…...

DeepSeek 技术赋能无人农场协同作业:用 AI 重构农田管理 “神经网”

目录 一、引言二、DeepSeek 技术大揭秘2.1 核心架构解析2.2 关键技术剖析 三、智能农业无人农场协同作业现状3.1 发展现状概述3.2 协同作业模式介绍 四、DeepSeek 的 “农场奇妙游”4.1 数据处理与分析4.2 作物生长监测与预测4.3 病虫害防治4.4 农机协同作业调度 五、实际案例大…...

零基础在实践中学习网络安全-皮卡丘靶场(第九期-Unsafe Fileupload模块)(yakit方式)

本期内容并不是很难&#xff0c;相信大家会学的很愉快&#xff0c;当然对于有后端基础的朋友来说&#xff0c;本期内容更加容易了解&#xff0c;当然没有基础的也别担心&#xff0c;本期内容会详细解释有关内容 本期用到的软件&#xff1a;yakit&#xff08;因为经过之前好多期…...

Mobile ALOHA全身模仿学习

一、题目 Mobile ALOHA&#xff1a;通过低成本全身远程操作学习双手移动操作 传统模仿学习&#xff08;Imitation Learning&#xff09;缺点&#xff1a;聚焦与桌面操作&#xff0c;缺乏通用任务所需的移动性和灵活性 本论文优点&#xff1a;&#xff08;1&#xff09;在ALOHA…...

云原生玩法三问:构建自定义开发环境

云原生玩法三问&#xff1a;构建自定义开发环境 引言 临时运维一个古董项目&#xff0c;无文档&#xff0c;无环境&#xff0c;无交接人&#xff0c;俗称三无。 运行设备的环境老&#xff0c;本地环境版本高&#xff0c;ssh不过去。正好最近对 腾讯出品的云原生 cnb 感兴趣&…...

让回归模型不再被异常值“带跑偏“,MSE和Cauchy损失函数在噪声数据环境下的实战对比

在机器学习的回归分析中&#xff0c;损失函数的选择对模型性能具有决定性影响。均方误差&#xff08;MSE&#xff09;作为经典的损失函数&#xff0c;在处理干净数据时表现优异&#xff0c;但在面对包含异常值的噪声数据时&#xff0c;其对大误差的二次惩罚机制往往导致模型参数…...

基于Java Swing的电子通讯录设计与实现:附系统托盘功能代码详解

JAVASQL电子通讯录带系统托盘 一、系统概述 本电子通讯录系统采用Java Swing开发桌面应用&#xff0c;结合SQLite数据库实现联系人管理功能&#xff0c;并集成系统托盘功能提升用户体验。系统支持联系人的增删改查、分组管理、搜索过滤等功能&#xff0c;同时可以最小化到系统…...

C++课设:简易日历程序(支持传统节假日 + 二十四节气 + 个人纪念日管理)

名人说:路漫漫其修远兮,吾将上下而求索。—— 屈原《离骚》 创作者:Code_流苏(CSDN)(一个喜欢古诗词和编程的Coder😊) 专栏介绍:《编程项目实战》 目录 一、为什么要开发一个日历程序?1. 深入理解时间算法2. 练习面向对象设计3. 学习数据结构应用二、核心算法深度解析…...

深入浅出Diffusion模型:从原理到实践的全方位教程

I. 引言&#xff1a;生成式AI的黎明 – Diffusion模型是什么&#xff1f; 近年来&#xff0c;生成式人工智能&#xff08;Generative AI&#xff09;领域取得了爆炸性的进展&#xff0c;模型能够根据简单的文本提示创作出逼真的图像、连贯的文本&#xff0c;乃至更多令人惊叹的…...