HTML 相册2.0 通过css 获取图片资源 2024/7/22 日志

简单方法通过css 绕过同源策略 以获取资源

<!DOCTYPE html>
<html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>水面倒影</title>
</head>
<style>* {margin: 0;padding: 0;background-color: black;overflow: hidden;}:root {--url1: url('https://p1.ssl.qhimgs1.com/sdr/400__/t01ad51c404cedd035b.jpg');--url2: url('https://p1.ssl.qhimgs1.com/sdr/400__/t01c1a45e5e8cd59ed1.jpg');--url4: url('https://p1.ssl.qhimgs1.com/sdr/400__/t0476de4a34f088a8a7.jpg');--url5: url('https://p1.ssl.qhimgs1.com/sdr/400__/t04a17109704054cb5b.jpg');--url6: url('https://p2.ssl.qhimgs1.com/sdr/400__/t03e8c2d4c1fba3f1c2.jpg');--url7: url('https://p0.ssl.qhimgs1.com/sdr/400__/t01801242cf98b4c440.jpg');--url8: url('https://p2.ssl.qhimgs1.com/sdr/400__/t0439d69c47c0d7c0e8.jpg');}body {box-sizing: border-box;position: relative;overflow: hidden;z-index: -1;}.boxa {position: relative;margin: 0;padding: 0;width: 100vw;height: 500px;display: flex;justify-content: center;align-items: center;background-color: transparent;z-index: 1;}div:not(.boxa):not(.void):hover {transform: translateZ(200px) translateY(10px) rotateY(20deg);perspective: 1000px;-webkit-box-reflect: below 0px -webkit-linear-gradient(top, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.5));box-shadow: 0 0 20px 0 rgba(225, 136, 41, 0.5),0 0 25px 0 rgba(7, 229, 29, 0.5),0 0 30px 0 rgba(214, 46, 184, 0.5);}#t1:active {transform: translateX(600px) scale(2);box-shadow: 0 0 20px 10px rgba(134, 198, 237, 1),0 0 25px 15px rgba(3, 250, 213, 1),0 0 30px 20px rgba(244, 3, 39, 1);}#t2:active {transform: translateX(400px) scale(2);box-shadow: 0 0 20px 10px rgba(255, 165, 0, 1),0 0 25px 15px rgba(255, 0, 255, 1),0 0 30px 20px rgba(0, 255, 0, 1);}#t3:active {transform: translateX(200px) scale(2);box-shadow: 0 0 20px 10px rgba(0, 0, 255, 1),0 0 25px 15px rgba(255, 0, 0, 1),0 0 30px 20px rgba(0, 255, 255, 1);}#t4:active {transform: scale(2);box-shadow: 0 0 20px 10px rgba(128, 0, 128, 1),0 0 25px 15px rgba(255, 255, 0, 1),0 0 30px 20px rgba(0, 128, 128, 1);}#t5:active {transform: translateX(-200px) scale(2);box-shadow: 0 0 20px 10px rgba(128, 128, 0, 1),0 0 25px 15px rgba(128, 0, 0, 1),0 0 30px 20px rgba(0, 128, 0, 1);}#t6:active {transform: translateX(-400px) scale(2);box-shadow: 0 0 20px 10px rgba(0, 0, 0, 1),0 0 25px 15px rgba(255, 255, 255, 1),0 0 30px 20px rgba(128, 128, 128, 1);}#t7:active {transform: translateX(-600px) scale(2);box-shadow: 0 0 20px 10px rgba(255, 255, 128, 1),0 0 25px 15px rgba(128, 255, 255, 1),0 0 30px 20px rgba(255, 128, 128, 1);}.test1 {overflow: hidden;width: 200px;height: 300px;background-image: var(--url1);background-repeat: no-repeat;background-position: center;background-size: cover;border: 2px solid rgb(255, 255, 255);}.test2 {overflow: hidden;width: 200px;height: 300px;background-image: var(--url2);background-repeat: no-repeat;background-position: center;background-size: cover;border: 2px solid rgb(255, 255, 255);}.test3 {overflow: hidden;width: 200px;height: 300px;background-image: var(--url4);background-repeat: no-repeat;background-position: center;background-size: cover;border: 2px solid rgb(255, 255, 255);}.test4 {overflow: hidden;width: 200px;height: 300px;background-image: var(--url5);background-repeat: no-repeat;background-position: center;background-size: cover;border: 2px solid rgb(255, 255, 255);}.test5 {overflow: hidden;width: 200px;height: 300px;background-image: var(--url6);background-repeat: no-repeat;background-position: center;background-size: cover;border: 2px solid rgb(255, 255, 255);}.test6 {overflow: hidden;width: 200px;height: 300px;background-image: var(--url7);background-repeat: no-repeat;background-position: center;background-size: cover;border: 2px solid rgb(255, 255, 255);}.test7 {overflow: hidden;width: 200px;height: 300px;background-image: var(--url8);background-repeat: no-repeat;background-position: center;background-size: cover;border: 2px solid rgb(255, 255, 255);}.void {top: -16vh;z-index: 0;position: relative;width: 100vw;height: 500px;background-image: url("https://p3.ssl.qhimgs1.com/sdr/400__/t011d51db67bfe62a1d.gif");background-repeat: no-repeat;background-position: center;background-size: cover;opacity: 0.5;}
</style><body><div id="box" class="boxa"><div id="t1" class="test1"></div><div id="t2" class="test2"></div><div id="t3" class="test3"></div><div id="t4" class="test4"></div><div id="t5" class="test5"></div><div id="t6" class="test6"></div><div id="t7" class="test7"></div></div><div class="void">显示图片</div></body></html>

效果展示 

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

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

相关文章

从理论到实践:如何用 TDengine 打造完美数据模型​

在用 TDengine 进行数据建模之前&#xff0c;我们需要回答两个关键问题&#xff1a;建模的目标用户是谁&#xff1f;他们的具体需求是什么&#xff1f;在一个典型的时序数据管理方案中&#xff0c;数据采集和数据应用是两个主要环节。如下图所示&#xff1a; 对于数据采集工程师…

Python中的__new__方法及实现单例模式

在Python中&#xff0c;类的实例化过程通常由两个主要方法控制&#xff1a;__new__和__init__。虽然我们大多数时候只需要关注__init__方法&#xff0c;但__new__方法在某些高级用例中非常有用。本文将详细介绍__new__方法&#xff0c;解释其定义、使用场景以及与__init__方法的…

EXCEL怎么自动添加表格吗?

第一步&#xff0c;选中需要添加表格的范围 第二步&#xff0c;点击开始&#xff0c;选择条件格式&#xff0c;“使用公式确定要设置格式的单元格” 第三步&#xff0c;编辑规则说明加上<>"" 第四步&#xff0c;点击边框&#xff0c;选择外边框确定即可&#x…

matlab 中的methods(Access = protected) 是什么意思

gpt版本 在 MATLAB 中&#xff0c;methods 是用于定义类方法的一部分。(Access protected) 是一种访问控制修饰符&#xff0c;它限制了方法的访问权限。具体来说&#xff0c;当你在类定义中使用 methods(Access protected) 时&#xff0c;你是在定义只有类本身及其子类可以访…

bash 笔记

这一篇的内容&#xff0c;太乱了。以后再整理: 把熟悉的内容删掉。不熟悉的内容放到前面。 # bash: export HOME$PWD export PS1"$" 更简短把 home 把当前目录设置为 home, 目的是缩短命令提示符前面的内容。 看起来更简短。zcat labevents.csv.gz | awk -F, (…

电脑没有摄像头怎么用手机当摄像头?虚拟摄像头使用的详细教程来了(全)

随着科技水平以及全球化经济的快速发展&#xff0c;视频会议、在线课程和直播已经成为日常办公或者生活中必不可少的一个环节。然而&#xff0c;在如今仍有许多台式电脑和一些老旧的笔记本电脑并没有内置摄像头&#xff0c;亦或者自带的摄像头质量不够理想&#xff0c;这使得视…

1小时上手Alibaba Sentinel流控安全组件

微服务的雪崩效应 假如我们开发了一套分布式应用系统&#xff0c;前端应用分别向A/H/I/P四个服务发起调用请求&#xff1a; 但随着时间推移&#xff0c;假如服务 I 因为优化问题&#xff0c;导致需要 20 秒才能返回响应&#xff0c;这就必然会导致20秒内该请求线程会一直处于阻…

跟代码执行流程,读Megatron源码(四)megatron训练脚本initialize.py之initialize_megatron()分布式环境初始化

在前文中&#xff0c;我们讲述了pretrain函数的执行流程&#xff0c;其首要步骤是megatron分组的初始化与环境的配置。本文将深入initialize_megatron函数源码&#xff0c;剖析其初始化分布式训练环境的内部机制。 注&#xff1a;在此假设读者具备3D并行相关知识 一. initiali…

引入缓存带来的问题以及解决方案

目录 前言 问题与解决方案 缓存击穿 缓存穿透 缓存雪崩 缓存一致性 前言 在提升接口性能的方案中&#xff0c;毫无疑问&#xff0c;使用缓存是最有效果的&#xff0c;但同时也会带来新的问题。 缓存击穿缓存穿透缓存雪崩缓存一致性 以上问题都是引入缓存需要考虑的&am…

react入门到实战-day2-7.21

昨天晚上刚学完已经一点了&#xff0c;来不及写笔记&#xff0c;主要是想睡觉哈&#xff0c;所以今天补上&#xff0c;我发现效率还挺高的&#xff0c;今天重新做笔记&#xff0c;加固了昨天的知识点&#xff0c;要不以后都这样子哈&#xff0c;学完第二天再写哈&#xff0c;要…

【Linux】从零开始认识多线程 --- 线程ID

在这个浮躁的时代 只有自律的人才能脱颖而出 -- 《觉醒年代》 1 前言 上一篇文章中讲解了线程控制的基本接口&#xff1a; 线程创建pthread_create(pthread_t *thread, const pthread_attr_t *attr, void *(*start_routine) (void *), void *arg);: pthread_t *thread :输出…

OpenCV分水岭算法watershed函数的使用

操作系统&#xff1a;ubuntu22.04 OpenCV版本&#xff1a;OpenCV4.9 IDE:Visual Studio Code 编程语言&#xff1a;C11 描述 我们将学会使用基于标记的分水岭算法来进行图像分割。我们将看到&#xff1a;watershed()函数的用法。 任何灰度图像都可以被视为一个地形表…

【数据结构_C语言】归并排序—文件类型

文章目录 1.排序定义2. 代码实现 1.排序定义 内排序&#xff1a;数据量相对少一些&#xff0c;可以放到内存中排序。 外排序&#xff1a;数据量较大&#xff0c;内存中放不下&#xff0c;数据放到磁盘文件中&#xff0c;需要排序。 归并排序&#xff1a; 2. 代码实现 void…

Flask 框架 redirect() url_for()

url_for url_for 函数根据传入的端点名称&#xff08;即路由函数名&#xff09;生成对应的 URL。 1. url_for() url_for 函数根据传入的端点名称&#xff08;即路由函数名&#xff09;生成对应的 URL。 它接受一个或多个参数&#xff0c;其中第一个参数是路由的名称&#x…

编写DockerFile

将自己的项目或者环境通过Docker部署到服务器需要一下几个步骤&#xff1a; 打包项目或者环境 编写Dockerfile文件 运行Dockerfile文件&#xff0c;构建DockerImages镜像&#xff0c;将DockerImages存入DockerHub或者存入阿里云镜像仓库 服务器pull下DockerImages镜像&#…

挖掘基于边缘无线协同感知的低功耗物联网 (LPIOT) 的巨大潜力

关键词&#xff1a;边缘无线协同感知、低功耗物联网(LPIOT)、无线混合组网、用电监测、用电计量、多角色、计量插座、无线场景感知、多角色运用、后台边缘层&#xff0c;网络边缘层&#xff0c;场景能效管理&#xff0c;场景能耗计算 在数字化和智能化日益加速的今天&#xff…

科普文:重读并翻译分布式计算经典文论-MapReduce

MapReduce计算模型于2003年提出于google&#xff0c;并迅速在google内部被广泛运用在各个领域&#xff0c;因为google存在许多基于大型数据的计算问题&#xff0c;而刚好MapReduce能够同时利用上千台机器进行分布式并行计算。MapRedue易于使用&#xff0c;由于它把并行化、分布…

甄选范文“论面向方面的编程技术及其应”,软考高级论文,系统架构设计师论文

论文真题 针对应用开发所面临的规模不断扩大、复杂度不断提升的问题,面向方面的编程(Aspect Oriented Programming,AOP)技术提供了一种有效的程序开发方法。为了理解和完成一个复杂的程序,通常要把程序进行功能划分和封装。一般系统中的某些通用功能,如安全性、持续性、日…

C++ —— STL简介

1. 什么是STL STL(standard template libaray-标准模板库)&#xff1a;是C标准库的重要组成部分&#xff0c;不仅是一个可复用的 组件库&#xff0c;而且是一个包罗数据结构与算法的软件框架 2.STL的版本 原始版本 Alexander Stepanov、Meng Lee 在惠普实验室完成的原始版本…

深度学习优化:Mojo模型中自定义特征的稀疏表示处理

深度学习优化&#xff1a;Mojo模型中自定义特征的稀疏表示处理 在机器学习领域&#xff0c;特征的稀疏表示是一种常见的数据表示方式&#xff0c;尤其在处理文本、图像和网络数据时。Mojo模型&#xff0c;作为模型部署的一种形式&#xff0c;支持将训练好的模型转换为可在不同…