后端开发教程 - Java、Spring Boot 实战 - msg200.com
⚠️ 别在家尝试：纯 CSS 图像细节缩放 - 越 hack 越好！🖼️🔍
不，说真的，别这么做。我们会用黑客手段闯过去。这会涉及很多肮脏的黑客手段和不良做法，会让大多数屏幕阅读器和老款浏览器崩溃，甚至会痛哭流涕、绝望不已。我们故意这么做的，这应该很糟糕。我们即将创建的……东西，是为了给大家一个反面教材，告诉大家哪些行为不该做。好了，我已经警告过你了。不过，我会在方框里附上一些我入侵的例子，并解释为什么你不应该这么做。
我想向@nuritnt致敬！当时我们正在辅导一群 Web 开发学生，她最初问了一个问题：“你能只用 CSS 做一个图像细节缩放模式吗？或许可以写一篇关于这个的文章？”，所以，没错，我们做到了！
现在，让我们开始行动吧，好吗？
我们正在努力构建的东西
因此，在某些网店中，点击小产品图片时，图片会以放大版打开。当产品图片包含不同部件的集合，而您想查看各个部件时，此功能尤其有用。或者，如果您想阅读包装上的一句话，此功能尤其有用。
为了让操作更方便一些，我还想添加使用 ESC 键关闭模态框的功能。别担心，不用 JS 我们也能搞定。
所以，点击小图会在模态框中打开大图。按 ESC 键并点击“关闭”按钮再次关闭。听起来不错。
步骤 1：图像
首先，我们需要一张图片。我准备使用placeholder.com来做这件事：
如果你不知道 placeholder.com，这是一个很棒的创建占位符图片的网站。你可以通过 URL（例如http://via.placeholder.com/640x480.png）获取图片的大小，并通过 GET 参数添加文本等内容。
等一下，啊哈，您要使用可靠的复选框技巧，对吗？
差一点！今天，情况会更糟。
对于那些不知道的人来说，复选框技巧在过去曾被用来规避使用 JavaScript 进行简单的样式切换。通过使用兄弟选择器（.a ~ .b，也.b就是 的兄弟元素.a）和:checked伪类，我们能够进行切换。一个非常简单的例子可能是.some-toggle:checked ~ .menu { display: block; }。
我将使用好的旧方法<input type="text">及其焦点状态来实现这一点。
我实际上会超越这一点，并使用文本输入作为图像：
<div class="imagezoom-container" style="width: 100px; height: 100px;">
<input type="text" class="imagezoom" style="
background-image: url(http://via.placeholder.com/640x480.png?text=Image%201);
">
</div>
.imagezoom-container {
display: inline-block;
margin: 10px;
}
.imagezoom {
width: inherit;
height: inherit;
background-size: cover;
background-position: center;
border: 0 none;
/* Get rid of any text */
color: rgba(0, 0, 0, 0);
}
/* Get rid of any text selection */
.imagezoom::selection {
display: none;
}
哇。
请不要像这样在页面上添加图片！屏幕阅读器只会识别没有标签的输入，无法添加alt文本，而且图片可能会被扭曲/裁剪。
我在这里使用输入字段是为了最小化 DOM。此外，由于我们使用了焦点状态，我们可以保证任何点击图片（即使图片被放大）都会触发输入框的焦点，从而保持模态框打开。真恶心！
使用元素焦点状态
现在我们将设计
输入字段图像/模式的缩放状态：
.imagezoom:focus {
/* Make the "image" fill the entire screen */
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: calc(100vw - 200px) !important;
height: calc(100vh - 100px) !important;
/* Style the background-image */
background-size: contain;
background-repeat: no-repeat;
margin: 50px 100px;
/* Remove the background-color by making it fully transparent */
background-color: rgba(0, 0, 0, 0);
/* Get rid of default focus styling */
z-index: 2;
border: 0 none;
outline: none;
}
/* The dark background */
.imagezoom-background {
display: none;
}
.imagezoom:focus ~ .imagezoom-background {
display: block;
position: fixed;
top: 0;
left: 0;
bottom: 0;
right: 0;
width: 100vw;
height: 100vh;
z-index: 1;
background-color: rgba(0, 0, 0, 0.8);
}
<div class="imagezoom-container" style="width: 100px; height: 100px;">
<input type="text" class="imagezoom" style="
background-image: url(http://via.placeholder.com/640x480.png?text=Image%201);
">
<div class="imagezoom-background"></div>
</div>
请不要使用输入字段来实现此目的！屏幕阅读器不会知道您正在尝试构建图像缩放功能。它们会认为自己身处一个包含数十个输入框的巨型表单中，而不是一个图片库。它们可能也不会知道您正在将其用作某种切换开关。
最后，我们添加一个关闭按钮。它很方便地<button>获取焦点，从而关闭模态框。
结果
结果最多只能算平均水平：
您可能需要在单独的窗口中打开钢笔，尤其是在移动设备上。我还为图像添加了最小宽度，以便至少在移动设备上显示。
虽然技术上在移动设备上是可以正常使用的，但它会打开键盘，而输入框通常会起到这样的作用。不过，用单选框或复选框代替输入框或许可以解决这个问题。此外，当打开一个输入框时，另一个图像会奇怪地跳动。
为了获得完整的体验，我建议您复制Pen的HTML和CSS，并将其放入磁盘上的HTML文件，然后在那里打开它。Codepen会干扰焦点，因此在Pen中按ESC关闭实际上不起作用。
我再说一遍：千万别在生产环境中这么做。用 JavaScript 就行。我得去洗手了……
希望你喜欢阅读这篇文章，就像我喜欢写它一样！如果喜欢，请留下❤️或🦄 ！我空闲时间会写科技文章，偶尔也喜欢喝咖啡。
如果你想支持我的努力， 可以请我喝杯咖啡☕ ，或者 在推特上关注我🐦 ！ 你也可以直接通过PayPal支持我！
