-
刚开始用的 img 标签设置图片，可以自动自适应，但修改图片颜色需要滤镜，感觉比较复杂，所以放弃了此方法。
-
想用字体图标是做，但还需要设计去重新帮忙弄，设计又很忙所以暂搁了此方法。
-
最后用svg, 简单的svg 改变颜色很简单，但自适应却让我想了一会，最后想着用最笨的办法：
裹一个 relative 定位的 div，底下放一个宽度100%透明的 img，上面覆盖一个 宽高100% 的 absolute 的 svg 图片，代码如下：
<style>
.svg-box{
position: relative;
.svg-box img{
opacity: 0;
.svg-box .svg-icon{
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
</style>
<div class="svg-box">
<img src="multiple.png" width="100%"/>
<svg width="198" height="206" viewBox="0 0 198 206" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg-icon">
<rect x="8.5" y="24.5" width="181" height="181" rx="3.5" fill="#fff" stroke="#E6007A"/>
<rect x="4.5" y="12.5" width="189" height="189" rx="3.5" fill="#fff" stroke="#E6007A"/>
<rect x=".5" y=".5" width="197" height="197" rx="3.5" fill="#fff" stroke="#E6007A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M113.142 113.142c7.811-7.81 7.811-20.474 0-28.284-7.81-7.81-20.474-7.81-28.284 0-7.81 7.81-7.81 20.474 0 28.284 7.81 7.811 20.474 7.811 28.284 0zM109 99a2 2 0 0 1-2 2h-6v6a2 2 0 0 1-4 0v-6h-6a2 2 0 0 1 0-4h6v-6a2 2 0 1 1 4 0v6h6a2 2 0 0 1 2 2z" fill="#E6007A"/>
</svg>
</div>
后来发现 去掉透明 img 和定位，仍然有效，代码见下方解决方法
<div class="svg-box">
<svg width="198" height="206" viewBox="0 0 198 206" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg-icon">
<rect x="8.5" y="24.5" width="181" height="181" rx="3.5" fill="#fff" stroke="#E6007A"/>
<rect x="4.5" y="12.5" width="189" height="189" rx="3.5" fill="#fff" stroke="#E6007A"/>
<rect x=".5" y=".5" width="197" height="197" rx="3.5" fill="#fff" stroke="#E6007A"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M113.142 113.142c7.811-7.81 7.811-20.474 0-28.284-7.81-7.81-20.474-7.81-28.284 0-7.81 7.81-7.81 20.474 0 28.284 7.81 7.811 20.474 7.811 28.284 0zM109 99a2 2 0 0 1-2 2h-6v6a2 2 0 0 1-4 0v-6h-6a2 2 0 0 1 0-4h6v-6a2 2 0 1 1 4 0v6h6a2 2 0 0 1 2 2z" fill="#E6007A"/>
</svg>
</div>
:root{
--mainColor: #e6007a;
.svg-box .svg-icon{
width: 100%;
height: 100%;
.svg-icon rect{
stroke:var(--mainColor);
.svg-icon path{
fill:var(--mainColor);
JS: 修改主题色
let root = document.querySelector(":root");
root.style.setProperty("--mainColor", '你想设置的主题颜色，如：#3498db');
https://www.wangyanan.online
需求下图中的图案和文字根据网站的主题色更新缩放屏幕大小时，图片可以根据屏幕大小自适应默认图片的 svg 代码<svg width="198" height="206" viewBox="0 0 198 206" fill="none" xmlns="http://www.w3.org/2000/svg" class="svg-icon"> <rect x="8.5" y="24.5" width="181" height="181" rx="3.5" fill="#ff
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compati...
这是我的第二个专业HTML，CSS课程的项目。 我使用Photoshop和Zeplin通过模板制作了该网站。
HTML标记是使用BEM方法的语义。
在本课程中，我学习了如何使用Less和SCSS（Sass）之类的预处理器。 另外，我获得了有关优化，使用带有Gulp的npm进行自动化，视网膜优化和响应图像的大量信息。 我使用“移动优先”功能制作了该网站。 这是自适应网站，具有良好的可访问性。
模态窗口JavaScript（添加到购物篮）
的Photoshop
自适应设计
视网膜优化
自适应图像（对图像使用标签）
模板的布局和原型
崇高文字快速浏览
此Sublime Text软件包为Adobe Brackets中的图像和CSS颜色提供了悬停预览弹出窗口。
悬停弹出窗口的设计旨在从“括号”中复制“快速查看”功能的样式，但是它使用基于配色方案的自适应颜色，并且插件逻辑是从头开始编写的。
如果愿意的话，也可以尝试使用我的包装Sublime Text。
该软件包可以通过Sublime Text的软件包管理器。 从命令面板中选择Package Control：安装Package并搜索QuickView 。
将鼠标悬停在受支持的语法中的图像链接或CSS颜色上，以显示预览弹出窗口。 可以使用以下文件格式进行图像预览：
JPEG格式
骨形态发生蛋白
SVG，WebP和AVIF格式需要安装图像转换器，并且必须在程序包设置中将其激活。
可以在程序包设置中分
SVG格式本身就是矢量图形格式，可以随意缩放。但是如果如果整个画面都是通过SVG进行搭建，同一个SVG图形嵌入在HTML中，要同时满足多个分辨率屏幕的查看，还是需要进行一些额外的设置，包括JS动态设置width、height等。
用户在设计SVG图形的初期，先要确定该SVG图形的大致画面比例和查看方向，比如：该画面是在手机上查看还是Pad上查看还是pc上；还有，允许该画面只是上下滑动查看（对
<svg width="100" height="100">
<ellipse cx="50" cy="50" rx="50" ry="50" fill="none" stroke="#000" />
</svg>
解释一下：
- `<svg>` 标签表示这是一个 SVG 图形。它的 `width` 和 `height` 属性表示图形的宽度和高度。
- `<ellipse>` 标签表示这是一个椭圆。它的 `cx` 和 `cy` 属性表示椭圆的中心的横纵坐标，`rx` 和 `ry` 属性分别表示椭圆的水平半径和垂直半径。
- `fill` 属性表示图形的填充色，这里设置为 `none` 表示不填充。`stroke` 属性表示图形的边框颜色，这里设置为黑色。
希望这能帮到你！
