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

【积水成渊】CSS磨砂玻璃效果和渐变主题色文字

 大家好,我是csdn的博主:lqj_本人

lqj_本人_python人工智能视觉(opencv)从入门到实战,前端,微信小程序-CSDN博客

最新的uniapp毕业设计专栏也放在下方了:

https://blog.csdn.net/lbcyllqj/category_12346639.html?spm=1001.2014.3001.5482

平时我也会在哔哩哔哩视频中讲解一些大家平时用得到的东西,

哔哩哔哩欢迎关注:

卢淼儿的个人空间-卢淼儿个人主页-哔哩哔哩视频

目录

怎么做?

HTML

CSS

js


磨砂玻璃效果已经在互联网上流行了很多年,Mac OS以其磨砂玻璃效果而闻名,Windows 10也通过其他一些灯光,深度,运动,材质,比例尺实现了磨砂玻璃的效果 。

在CSS中使用磨砂玻璃效果时,我们中的一些人知道该怎么做,而其他人仍会在百度搜索:

怎么做?

“ css光泽效果”
“ css毛玻璃”
“透明模糊背景css”
“毛玻璃效果photoshop”
“仅cs模糊背景”
“ css玻璃窗格”
“ css背景滤镜”
“ css模糊覆盖物”
“ css div后面的模糊背景”

今天,我将展示仅CSS的一种方法,教你可以使用该方法在CSS中进行磨砂玻璃效果。 

HTML

<div class="card"><h2 class="gradient"><哔哩哔哩:卢淼儿/></h2><div><p>.welcome{</p><p class="indent">"CSDN:lqj_本人"</p><p class="indent">"哔哩哔哩:卢淼儿"</p><p>}</p></div><a href="#" class="gradient">欢迎三连</a>
</div>

CSS

body {display: flex;justify-content: center;align-items: center;margin: 0;padding: 0;width: 100vw;min-height: 100vh;background: url(https://img0.baidu.com/it/u=1049144354,3589714554&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800) no-repeat;background-size: cover;
}.card {display: flex;flex-direction: column;justify-content: center;align-items: center;padding: 20px;width: 300px;height: 400px;box-shadow: 20px 20px 50px rgba(0, 0, 0, 0.5);border-top: 1px solid rgba(255, 255, 255, 0.1);border-left: 1px solid rgba(255, 255, 255, 0.1);border-radius: 15px;background: rgba(255, 255, 255, .9);//   background: rgba(255, 255, 255, .3);//   backdrop-filter: blur(20px) brightness(150%);@supports (backdrop-filter: blur(20px) brightness(150%)) {background: rgba(255, 255, 255, .3);backdrop-filter: blur(20px) brightness(150%);}h2 {font-size: 1.8em;color: transparent;-webkit-background-clip: text;background-clip: text;}p {font-size: 1em;color: #1b263b;font-weight: 300;&.indent {text-indent: 1em;}}a {padding: 15px 50px;border-radius: 30px;color: white;text-decoration: none;font-weight: 500;// background-image: linear-gradient(//     45deg,//     hsl(220deg 67.24% 60%),//     hsl(333.91deg 50% 60%)// );box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);transition: filter .5s;&:hover {filter: brightness(120%);}}
}

js

function rgbToHsl(r, g, b) {r /= 255;g /= 255;b /= 255;let max = Math.max(r, g, b);let min = Math.min(r, g, b);let h, s, l = (max + min) / 2;if (max === min) {h = s = 0;} else {let d = max - min;s = l > 0.5 ? d / (2 - max - min) : d / (max + min);switch (max) {case r:h = (g - b) / d + (g < b ? 6 : 0);break;case g:h = (b - r) / d + 2;break;case b:h = (r - g) / d + 4;break;}h /= 6;}return [h * 360, s * 100, l * 100];
}
const gradientBtn = () => {const img = new Image();img.addEventListener('load', function() {const colorThief = new ColorThief();let palette = colorThief.getPalette(img, 3);palette.forEach((item, index) => {palette[index] = rgbToHsl(...item);})// document.getElementById('button').style.backgroundImage = `linear-gradient(//     45deg,//     hsl(${palette[1][0]}deg 60% 60%),//     hsl(${palette[2][0]}deg 60% 60%)// )`;document.querySelectorAll('.gradient').forEach(el => el.style.backgroundImage = `linear-gradient(45deg,hsl(${palette[1][0]}deg 60% 60%),hsl(${palette[2][0]}deg 60% 60%))`);// document.getElementById('button').style.backgroundImage = `linear-gradient(//     45deg,//     hsl(${palette[1][0]}deg ${palette[1][1]}% ${palette[1][2]}%),//     hsl(${palette[2][0]}deg ${palette[2][1]}% ${palette[2][2]}%)// )`;// document.getElementById('button').style.backgroundImage = `linear-gradient(//     45deg,//     rgb(${palette[1][0]}, ${palette[1][1]}, ${palette[1][2]}),//     rgb(${palette[2][0]}, ${palette[2][1]}, ${palette[2][2]})// )`;});img.crossOrigin = 'anonymous';img.src = 'https://img0.baidu.com/it/u=1049144354,3589714554&fm=253&fmt=auto&app=120&f=JPEG?w=1280&h=800 no-repeat';
}gradientBtn();

相关文章:

【积水成渊】CSS磨砂玻璃效果和渐变主题色文字

大家好&#xff0c;我是csdn的博主&#xff1a;lqj_本人 lqj_本人_python人工智能视觉&#xff08;opencv&#xff09;从入门到实战,前端,微信小程序-CSDN博客 最新的uniapp毕业设计专栏也放在下方了&#xff1a; https://blog.csdn.net/lbcyllqj/category_12346639.html?spm1…...

JVM、JRE、JDK三者之间的关系

JVM、JRE和JDK是与Java开发和运行相关的三个重要概念。 再了解三者之前让我们先来了解下java源文件的执行顺序&#xff1a; 使用编辑器或IDE(集成开发环境)编写Java源文件.即demo.java程序必须编译为字节码文件&#xff0c;javac(Java编译器)编译源文件为demo.class文件.类文…...

input 标签的 type 属性有哪些值?分别表示什么意思?

聚沙成塔每天进步一点点 ⭐ 专栏简介⭐ type值以及作用⭐ 写在最后 ⭐ 专栏简介 前端入门之旅&#xff1a;探索Web开发的奇妙世界 记得点击上方或者右侧链接订阅本专栏哦 几何带你启航前端之旅 欢迎来到前端入门之旅&#xff01;这个专栏是为那些对Web开发感兴趣、刚刚踏入前端…...

(十五)大数据实战——hive的安装部署

前言 Hive是由Facebook开源&#xff0c;基于Hadoop的一个数据仓库工具&#xff0c;可以将结构化的数据文件映射为一张表&#xff0c;并提供类SQL查询功能。本节内容我们主要介绍一下hive的安装与部署的相关内容。 正文 上传hive安装包到hadoop101服务器/opt/software目录 解…...

MySQL安装和卸载

1.MySQL概述 MySQL概述 MySQL是一个[关系型数据库管理系统]&#xff0c;由瑞典MySQL AB 公司开发&#xff0c;2008年被sun公司收购&#xff0c; 2009sun又被oracle收购&#xff0c;所以属于 Oracle 旗下产品。MySQL 是最流行的关系型数据库管理系统之一&#xff0c;在 WEB 应用…...

ELK、ELFK日志分析系统

菜单一、ELK简介1.1 ELK组件说明1.1.1 ElasticSearch1.1.2 Kiabana1.1.3 Logstash 1.2 可以添加的其它组件1.2.1 Filebeat1.2.2 缓存/消息队列&#xff08;redis、kafka、RabbitMQ等&#xff09;1.2.3 Fluentd 1.3 为什么要用ELK1.4 完整日志系统的基本特征1.5 ELK 的工作原理 …...

JVM基础篇-StringTable

StringTable 特性 常量池中的字符串仅是符号&#xff0c;第一次用到时才变为对象 利用串池的机制&#xff0c;来避免重复创建字符串对象 字符串变量拼接的原理是 StringBuilder &#xff08;1.8&#xff09; 字符串常量拼接的原理是编译期优化 可以使用 intern 方法&#…...

探秘手机隐藏的望远镜功能:开启后,观察任何你想看的地方

当今的智能手机不仅仅是通信工具&#xff0c;它们蕴藏着各种隐藏的功能&#xff0c;其中之一就是让你拥有望远镜般的观察能力。是的&#xff0c;你没有听错&#xff01;今天我们将探秘手机中隐藏的望远镜功能&#xff0c;这项神奇的功能可以让你打开后&#xff0c;轻松观察任何…...

正运动亮相2023半导体设备材料与核心部件展示会,助力半导体产业高速高精应用

■展会名称&#xff1a; 第11届&#xff08;2023&#xff09;半导体设备材料与核心部件展示会 ■展会日期 2023年8月9日-11日 ■展馆地点 无锡太湖国际博览中心A6馆 ■展位号 A6-A361 正运动技术&#xff0c;作为国内领先的运动控制企业&#xff0c;将于2023年8月9日参加…...

如何在MongoDB中添加新用户

如何在MongoDB中添加新用户&#xff1f; MongoDB是一款流行的NoSQL数据库&#xff0c;它的可扩展性强&#xff0c;可进行分布式部署&#xff0c;且具有高可用性。其许多优势使得越来越多的企业和组织选择MongoDB作为其数据库系统。本文将介绍如何在MongoDB中添加新用户。 第一步…...

幻读怎么复现

大家好&#xff0c;我是想想。 很久没有给大家分享技术了&#xff0c;主要在计划一些事情&#xff0c;几乎没什么时间爽文了。 今天从实操上实现了MySQL事务隔离复现问题&#xff0c;就记录分享给大家吧。 正文 我们知道&#xff0c;著名的四大事务特性ACID特性 Atomicity…...

无脑入门pytorch系列(二)—— torch.mean

本系列教程适用于没有任何pytorch的同学&#xff08;简单的python语法还是要的&#xff09;&#xff0c;从代码的表层出发挖掘代码的深层含义&#xff0c;理解具体的意思和内涵。pytorch的很多函数看着非常简单&#xff0c;但是其中包含了很多内容&#xff0c;不了解其中的意思…...

ansible-kubeadm在线安装高可用K8S集群v1.19-v1.20版本

ansible可以安装的KS8版本如下&#xff1a; 请按照此博客中的内容操作后&#xff0c;才可以通过下面的命令查询到版本。 [rootk8s-master01 ~]# yum list kubectl --showduplicates | sort -r kubectl.x86_64 1.20.0-0 kubern…...

Cesium entity 渐隐渐显、闪烁

点entity function f2(){var x1;var flogtrue;//闪烁//var x0;var flogfalse;//渐显viewer.entities.add({name:"圆点point闪烁",position:Cesium.Cartesian3.fromDegrees(116.200.03,39.530.03,0),point : {show : true, // defaultcolor :new Cesium.CallbackProp…...

LISA:通过大语言模型进行推理分割

论文&#xff1a;https://arxiv.org/pdf/2308.00692 代码&#xff1a;GitHub - dvlab-research/LISA 摘要 尽管感知系统近年来取得了显著的进步&#xff0c;但在执行视觉识别任务之前&#xff0c;它们仍然依赖于明确的人类指令来识别目标物体或类别。这样的系统缺乏主动推理…...

opencv基础40-礼帽运算(原始图像减去其开运算)cv2.MORPH_TOPHAT

礼帽运算是用原始图像减去其开运算图像的操作。礼帽运算能够获取图像的噪声信息&#xff0c;或者得到比原始图像的边缘更亮的边缘信息。 例如&#xff0c;图 8-22 是一个礼帽运算示例&#xff0c;其中&#xff1a; 左图是原始图像。中间的图是开运算图像。右图是原始图像减开运…...

php中的array_filter()函数

php中的array_filter()函数用于筛选数组中的元素&#xff0c;并返回一个新的数组&#xff0c;新数组的元素是所有返回值为true的原数组元素。 array_filter()函数的使用语法如下&#xff1a; array_filter ( array $array [, callable $callback [, int $flag 0 ]] ) : array…...

ArcGIS Pro基础:【按顺序编号】工具实现属性字段的编号自动赋值

本次介绍一个字段的自动排序编号赋值工具&#xff0c;基于arcgis 的字段计算器工具也可以实现类似功能&#xff0c;但是需要自己写一段代码实现&#xff0c; 相对而言不是很方便。 如下所示&#xff0c;该工具就是【编辑】下的【属性】下的【按顺序编号】工具。 其操作方法是…...

neo4j终端操作

1】进入容器 (base) xiaokkkxiaokkkdeMacBook-Pro ~ % docker exec -it 77ed5fe2b52e /bin/bash 2】启动、停止neo4j root77ed5fe2b52e:/var/lib/neo4j/bin# ./neo4j start Neo4j is already running (pid:7). Run with --verbose for a more detailed error message.root7…...

【深度学习】在 MNIST实现自动编码器实践教程

一、说明 自动编码器是一种无监督学习的神经网络模型&#xff0c;主要用于降维或特征提取。常见的自动编码器包括基本的单层自动编码器、深度自动编码器、卷积自动编码器和变分自动编码器等。 其中&#xff0c;基本的单层自动编码器由一个编码器和一个解码器组成&#xff0c;编…...

利用快马平台AI能力,十分钟搭建你的Copilot式代码生成原型

今天想和大家分享一个快速验证AI编程助手&#xff08;Copilot类工具&#xff09;原型的实践。作为一个经常需要快速验证想法的开发者&#xff0c;我发现用InsCode(快马)平台可以省去很多搭建环境的时间&#xff0c;特别适合做这种概念验证。 明确核心需求 Copilot的核心能力其实…...

SPIRAN ART SUMMONER优化指南:如何调整参数让生成的图片更符合预期

SPIRAN ART SUMMONER优化指南&#xff1a;如何调整参数让生成的图片更符合预期 1. 理解SPIRAN ART SUMMONER的核心参数 SPIRAN ART SUMMONER作为一款基于Flux.1-Dev模型的图像生成工具&#xff0c;其参数设置直接影响最终输出效果。与普通AI绘画工具不同&#xff0c;它融入了…...

KiCanvas:浏览器中的KiCAD设计查看器,5分钟快速入门指南

KiCanvas&#xff1a;浏览器中的KiCAD设计查看器&#xff0c;5分钟快速入门指南 【免费下载链接】kicanvas The KiCAD web viewer 项目地址: https://gitcode.com/gh_mirrors/ki/kicanvas 想要在浏览器中直接查看KiCAD电路设计文件&#xff0c;无需安装任何软件&#xf…...

前端拖拽交互实现:别再只会用原生拖拽了

前端拖拽交互实现&#xff1a;别再只会用原生拖拽了 毒舌时刻这代码写得跟网红滤镜似的——仅供参考。各位前端同行&#xff0c;咱们今天聊聊前端拖拽交互。别告诉我你还在用原生的HTML5拖拽API&#xff0c;那感觉就像在用诺基亚手机——能打电话&#xff0c;但体验太差。 为什…...

OpenClaw开发辅助:Qwen3.5-9B实现日志分析与错误自动修复

OpenClaw开发辅助&#xff1a;Qwen3.5-9B实现日志分析与错误自动修复 1. 为什么需要AI辅助日志分析&#xff1f; 每次凌晨被报警短信吵醒&#xff0c;盯着密密麻麻的日志文件找异常时&#xff0c;我都会想&#xff1a;如果能有个AI助手帮我自动分析日志、定位问题甚至尝试修复…...

语音播报实时

目录 GPT-SoVITS&#xff08;强烈推荐&#xff09; Fish Speech-1.5 GPT-SoVITS&#xff08;强烈推荐&#xff09; RVC-Boss/GPT-SoVITS: 1 min voice data can also be used to train a good TTS model! (few shot voice cloning) Fish Speech-1.5 追求极致流畅的实时对话&a…...

从C语言到裸机运行:i.MX6ULL 的 GPIO 控制与编译链接过程分析

引言在嵌入式系统开发中&#xff0c;从高级语言到硬件控制的完整链路涉及编译、链接、寄存器配置等多个环节。本文基于 i.MX6ULL 平台&#xff0c;以 C 语言实现 LED 与蜂鸣器控制为例&#xff0c;系统分析 ARM 裸机开发中的编译工具链使用、链接脚本的作用&#xff0c;以及 GP…...

STM32F103C8T6驱动无FIFO的OV7670:从时序理解到图像显示的完整避坑指南

STM32F103C8T6驱动无FIFO的OV7670&#xff1a;从时序理解到图像显示的完整避坑指南 当你第一次将OV7670摄像头模块连接到STM32F103C8T6开发板时&#xff0c;可能会被那些看似简单的时序信号搞得晕头转向。VSYNC、HREF、PCLK——这些信号线背后隐藏着图像数据采集的全部秘密。本…...

气候降尺度全流程实战:从 CMIP6 数据到极端气候预估,科研人一站式通关

做水文气象、气候学、地理遥感、生态环境等领域的科研人&#xff0c;是不是都逃不过这些噩梦&#xff1a;尺度鸿沟难跨越&#xff1a;GCM 粗网格&#xff08;>100km&#xff09;和流域 / 城市精细尺度&#xff08;<10km&#xff09;不匹配&#xff0c;动力降尺度成本太高…...

告别杂乱农场:星露谷物语规划神器助你打造高效田园

告别杂乱农场&#xff1a;星露谷物语规划神器助你打造高效田园 【免费下载链接】stardewplanner Stardew Valley farm planner 项目地址: https://gitcode.com/gh_mirrors/st/stardewplanner 你是否曾在星露谷物语中面对一片荒地感到无从下手&#xff1f;种植区域混乱、…...