css3图片【缩略图效果：设置border和padding；响应式图片：width:100%;height:auto；卡片式图片:设置文字的各种绝对定位；滤镜效果；响应式图片相册@media；模态窗】

最新推荐文章于 2025-06-24 02:50:35 发布
原创 最新推荐文章于 2025-06-24 02:50:35 发布 · 689 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#css3

本文介绍了如何使用CSS进行图片布局，包括圆角、缩略图、响应式图片等样式设置，并展示了图片滤镜、模态窗口等高级应用。

CSS 图片

本章节将为大家介绍如何使用 CSS 来布局图片。

圆角图片

实例

圆角图片:

img {
     border-radius:  8px;
}

尝试一下 »

实例

椭圆形图片:

img {
     border-radius:  50%;
}

尝试一下 »

缩略图

我们使用 border 属性来创建缩略图。

实例

img {
     border:  1px solid #ddd;
     border-radius:  4px;
     padding:  5px;
}

<img src="paris.jpg" alt="Paris">

尝试一下 »

实例

a {
     display:  inline-block;
     border:  1px solid #ddd;
     border-radius:  4px;
     padding:  5px;
     transition:  0.3s;
}

a:hover {
     box-shadow:  0 0 2px 1px rgba
    (0, 140, 186, 0.5);
}

<a href="paris.jpg">
  <img src="paris.jpg" alt="Paris">
</a>

尝试一下 »

响应式图片

响应式图片会自动适配各种尺寸的屏幕。

实例中，你可以通过重置浏览器大小查看效果:

Norway

如果你需要自由缩放图片，且图片放大的尺寸不大于其原始的最大值，则可使用以下代码：

实例

img {
     max-width:  100%;
     height:  auto;
}

尝试一下 »

提示: Web 响应式设计更多内容可以参考 CSS 响应式设计教程。

图片文本

如何定位图片文本:

实例

Norway
左下角
左上角
右上角
右下角
居中

尝试一下:

左上角 »  右上角 »  左下角 »  右下角 »  居中 »

卡片式图片

实例

div.polaroid {
     width:  80%;
     background-color:  white;
     box-shadow:  0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
}

img { width:  100%}

div.container {
     text-align:  center;
     padding:  10px 20px;
}

尝试一下 »

图片滤镜

CSS filter 属性用为元素添加可视效果 (例如：模糊与饱和度) 。

注意: Internet Explorer 或 Safari 5.1 (及更早版本) 不支持该属性。

实例

修改所有图片的颜色为黑白 (100% 灰度):

img {
     -webkit-filter:  grayscale(100%);  /* Chrome, Safari, Opera */
     filter:  grayscale(100%);
}

尝试一下 »

提示: 访问 CSS 滤镜参考手册 查看更多内容。

响应式图片相册

实例

.responsive {
     padding:  0 6px;
     float:  left;
     width:  24.99999%;
}

@media only screen and (max-width: 700px){
    .responsive {
         width:  49.99999%;
         margin:  6px 0;
    }
}

@media only screen and (max-width: 500px){
    .responsive {
         width:  100%;
    }
}

尝试一下 »

图片 Modal(模态)

本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。

首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。

然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：

实例

// 获取模态窗口
 var modal = document.getElementById( 'myModal');

// 获取图片模态框，alt 属性作为图片弹出中文本描述
 var img = document.getElementById( 'myImg');
var modalImg = document.getElementById( "img01");
var captionText = document.getElementById( "caption");
img.onclick =  function(){
    modal.style.display =  "block";
    modalImg.src = this.src;
    modalImg.alt = this.alt;
    captionText.innerHTML = this.alt;
}

// Get the <span> element that closes the modal
 var span = document.getElementsByClassName( "close")[ 0];

// When the user clicks on <span> (x), close the modal
span.onclick =  function() { 
    modal.style.display =  "none";
}

尝试一下 » 
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>图片模态窗过渡弹出效果</title> 
<style>
#myImg {
    border-radius: 5px;
    cursor: pointer;
    transition: 0.3s;
}

#myImg:hover {opacity: 0.7;}

/* The Modal (background) */
.modal {
    display: none; /* Hidden by default */
    position: fixed; /* Stay in place */
    z-index: 1; /* Sit on top */
    padding-top: 100px; /* Location of the box */
    left: 0;
    top: 0;
    width: 100%; /* Full width */
    height: 100%; /* Full height */
    overflow: auto; /* Enable scroll if needed */
    background-color: rgb(0,0,0); /* Fallback color */
    background-color: rgba(0,0,0,0.9); /* Black w/ opacity */
}

/* Modal Content (image) */
.modal-content {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
}

/* Caption of Modal Image */
#caption {
    margin: auto;
    display: block;
    width: 80%;
    max-width: 700px;
    text-align: center;
    color: #ccc;
    padding: 10px 0;
    height: 150px;
}

/* Add Animation */
.modal-content, #caption {    
    -webkit-animation-name: zoom;
    -webkit-animation-duration: 0.6s;
    animation-name: zoom;
    animation-duration: 0.6s;
}

@-webkit-keyframes zoom {
    from {-webkit-transform: scale(0)} 
    to {-webkit-transform: scale(1)}
}

@keyframes zoom {
    from {transform: scale(0.1)} 
    to {transform: scale(1)}
}

/* The Close Button */
.close {
    position: absolute;
    top: 15px;
    right: 35px;
    color: #f1f1f1;
    font-size: 40px;
    font-weight: bold;
    transition: 0.3s;
}

.close:hover,
.close:focus {
    color: #bbb;
    text-decoration: none;
    cursor: pointer;
}

/* 100% Image Width on Smaller Screens */
@media only screen and (max-width: 700px){
    .modal-content {
        width: 100%;
    }
}
</style>
</head>
<body>

<h2>图片模态框</h2>
<p>本实例演示了如何结合 CSS 和 JavaScript 来一起渲染图片。</p><p>
首先，我们使用 CSS 来创建 modal 窗口 (对话框), 默认是隐藏的。<p>
<p>然后，我们使用 JavaScript 来显示模态窗口，当我们点击图片时，图片会在弹出的窗口中显示：</p>
<img id="myImg" src="http://www.runoob.com/wp-content/uploads/2016/04/img_lights.jpg" alt="Northern Lights, Norway" width="300" height="200">

<!-- The Modal -->
<div id="myModal" class="modal">
  <span class="close">×</span>
  <img class="modal-content" id="img01">
  <div id="caption"></div>
</div>

<script>
// 获取模态窗口
var modal = document.getElementById('myModal');

// 获取图片模态框，alt 属性作为图片弹出中文本描述
var img = document.getElementById('myImg');
var modalImg = document.getElementById("img01");
var captionText = document.getElementById("caption");
img.onclick = function(){
    modal.style.display = "block";
    modalImg.src = this.src;
    modalImg.alt = this.alt;
    captionText.innerHTML = this.alt;
}

// 获取 <span> 元素，设置关闭模态框按钮
var span = document.getElementsByClassName("close")[0];

// 点击 <span> 元素上的 (x), 关闭模态框
span.onclick = function() { 
    modal.style.display = "none";
}
</script>

</body>
</html>

CSS 媒体查询：实现完美响应式设计的核心
AI架构全栈开发实战笔记
05-29 1182
想象一下：你设计了一张精美的海报，打印在A4纸上很好看，但放大到广告牌就会模糊，缩小到便签纸又看不清文字——这就是网页在不同屏幕上的困境。本文将聚焦“如何用CSS媒体查询解决这一问题”，覆盖从基础概念到实战案例的全流程，帮你掌握响应式设计的核心能力。本文将按“故事引入→核心概念→工作原理→实战代码→最佳实践”的逻辑展开，用“布娃娃裁缝店”的故事贯穿始终，确保抽象概念具象化。媒体查询：根据设备特性（宽度、分辨率等）切换样式的“智能裁缝”。视口：网页显示的实际区域，必须通过设置为。断点。
CSS3 Flexbox 布局详解：告别浮动，拥抱弹性盒子
小白菜的博客
05-27 1537
本文旨在解决前端开发者在传统布局中的常见痛点（如垂直居中、多列自适应），系统讲解 Flexbox 的核心原理与实战技巧。内容覆盖 Flexbox 的基础概念、关键属性、数学计算逻辑，以及导航栏、卡片列表等高频场景的实现方法。本文从“装修房间”的生活场景切入，逐步拆解 Flexbox 的核心概念（容器、项目、主轴/交叉轴），通过数学公式和代码案例讲解布局逻辑，最后结合导航栏、响应式卡片等实战场景，帮你彻底掌握 Flexbox。Flex容器（Flex Container）：开启了或。
使用CSS制作图片缩略图
10-02
使用CSS制作XHTML网页上的图片缩略图，不含图片。
用css排列缩略图
yethyeth的专栏
04-01 3029
 Floating Thumbnailshttp://realworldstyle.com/thumb_float.html 用css排列缩略图 问题：如果你需要一些缩略图来链接到真实的大图，这是一个很常见的应用。再复杂一点，每个缩略图都有一个标题需要放在图下面。因此，你需要将图片以行为单位排列在屏幕上。但是当浏览器窗口不同时，图片将会自动调整行数（流体布局）。我们不用tabl
CSS教程·滤镜
10-30 1917
1、概述　　好了，下面我们将进入CSS的最精彩的部分--滤镜，它将把我们带入绚丽多姿的多媒体世界。正是有了滤镜属性，页面才变得更加漂亮。　　CSS的滤镜属性的标识符是filter。为了使您对它有个整体的印象，我们先来看一下它的书写格式：　　 filter：filtername（parameters） 　　怎么样？是不是很简单，看上去与前面讲的属性定义没什么太大的差别。Filter是滤镜
css 缩略图_使用CSS自动生成图像缩略图
cungui5726的博客
08-19 1401
css 缩略图Talking about the concepts of CSS filters with my class, I realized that one could use the clip or overflow properties to automatically generate thumbnails for a web image gallery. In most gall...
缩小HTML图片,css按照比例缩小图片:实现缩略图的办法
weixin_42506647的博客
06-04 662
先上css代码：.content img{max-width:50px;max-height:50px;}*html.content img{width:expression(this.width>50&&this.width>this.height?50:auto);height:expresion(this.height>50?50:auto);}如果你深谙...
【HTML与CSS结合】：样式化本地图片的展示效果：让你的图片不仅仅只是图片
[【HTML与CSS结合】：样式化本地图片的展示效果：让你的图片不仅仅只是图片](https://dekaclinic.ru/images/uploads/a7f1cc03a4c9e4373edf234cf41c6169.jpg) # 摘要 随着网页设计的发展，HTML和CSS已成为构建视觉...
CSS3 边框和背景：美化网页元素的终极指南
小白菜的博客
06-24 876
本文旨在全面介绍CSS3中边框和背景的相关属性，帮助读者掌握如何通过这些特性提升网页的视觉效果。内容涵盖从基础到高级的各种技巧，适合不同水平的开发者学习和参考。文章将从基础概念讲起，逐步深入到高级应用，最后提供实际案例和资源推荐，形成完整的学习路径。边框(Border)：围绕HTML元素边缘的线条背景(Background)：元素内容背后的填充区域圆角半径(Border-radius)：定义边框圆角程度的数值盒阴影(Box-shadow)：在元素周围创建阴影效果的属性边框。
DeepSeek 助力 Vue 开发：打造丝滑的缩略图列表（Thumbnail List）
宝码香车的博客
02-21 1730
DeepSeek 迅速给出了多个富有创意的情节走向和故事转折建议，这些建议不仅符合小说的整体风格，还为他打开了新的创作思路。他根据 DeepSeek 的建议，对小说进行了重新构思，最终创作出了一部广受好评的科幻小说。他表示：“DeepSeek 的创意激发能力让我惊叹，它就像是一个创意宝库，总能在我最需要的时候提供新奇的想法。”
CSS控制漂亮的缩略图样式
05-04
CSS控制漂亮的缩略图样式CSS控制漂亮的缩略图样式CSS控制漂亮的缩略图样式CSS控制漂亮的缩略图样式CSS控制漂亮的缩略图样式CSS控制漂亮的缩略图样式
CSS滤镜（filter）
热门推荐
zg0601的博客
10-23 2万+
目录 1、概念 2、使用 3、常用filter函数 4、常用滤镜实例
响应式页面中的图片定位
燃木刀法
08-29 1534
CSS3控制盒子大小          *{ margin: 0; padding: 0; border: 0;}     body{ }     .box{ width: 90%; height: 200px; border: 1px solid rgba(0, 0, 0, 0.8); margin: 100px auto; }     .one{ width: 50%; height
css滤镜
weixin_59855825的博客
07-16 491
调整元素的对比度。1为原始值，大于1增加对比度，小于1降低对比度。：调整元素的饱和度。1为原始值，大于1增加饱和度，小于1降低饱和度。：给元素添加阴影效果。1为原始值，大于1增加亮度，小于1降低亮度。这些滤镜效果可以单独使用，也可以组合在一起，用逗号分隔。1为完全褐色，0为无褐色效果。：给元素应用高斯模糊效果。1为完全灰度，0为无灰度效果。单位为角度，0deg为原始值。1为完全反转，0为无反转效果。这将使元素变为灰度，同时应用模糊和降低亮度效果。：调整元素的透明度。0为完全透明，1为不透明。
CSS滤镜
你我本如初见
04-19 464
通道（渐变）：filter: alpha(opacity = 100, finishopacity = 50, style = 2) /* opacity=0是完全透明，finishopacity是渐变结束时候的透明度，style是渐变形状：2是放射状。 */模糊：blur(add = ture, direction = 135, strength = 200) /* add：true模糊生效，
算了，不要以markdown 显示，而是以li 显示，分别显示 图片，llm，和ocr结果
最新发布
11-02
<think>我们不再生成Markdown表格，而是以列表形式（无序列表）展示每个测试用例的图片、LLM结果和OCR结果。 每个测试用例将作为一个列表项，包含： - DTS ID - 图片（缩略图，使用base64嵌入） - LLM解析结果（处理换行） - OCR解析结果（处理换行） - 各自的耗时 由于要求不使用Markdown，我们生成HTML格式的列表。 我们将生成一个完整的HTML报告，包含样式和对比图表。 步骤： 1. 解析JSON数据，处理文本换行和转义。 2. 为每个测试用例生成一个列表项（<li>），包含上述信息。 3. 生成HTML页面，包含样式和图表。 注意：因为要显示图片，我们仍然使用base64嵌入图片。 我们将生成一个HTML文件，结构如下： <!DOCTYPE html> <html> <head> <style> ... 样式定义 ... </style> </head> <body> <h1>LLM与OCR识别性能对比分析报告</h1> <ul class="test-list"> <li> <h3>DTS ID: ... </h3> <img src="data:image/png;base64,..." alt="测试图片"> <div class="results"> <div class="llm"> <h4>LLM解析结果</h4> <p>（处理换行后的文本）</p> <p>耗时：...秒</p> </div> <div class="ocr"> <h4>OCR解析结果</h4> <p>（处理换行后的文本）</p> <p>耗时：...秒</p> </div> </div> </li> ... 更多列表项 ... </ul> <!-- 图表区域 --> <div id="chart"> <img src="data:image/png;base64,..." alt="耗时对比图"> </div> <!-- 性能分析结论 --> </body> </html> </think>以下是不使用Markdown表格，而是以列表形式展示图片、LLM结果和OCR结果的解决方案： ```python import json import matplotlib.pyplot as plt from PIL import Image import requests from io import BytesIO import base64 import os from datetime import datetime # 原始JSON数据 json_data = [ { "DTS2025072627867": [ "https://dts-szv.clouddragon.huawei.com/v1/nfs/downLoadFile?filePath=%2F202507%2F20250726QZH000HWSW3_image.png", [ "外屏图库2K\n4K视频无控件播放\n视频缩放存在绿竖线（关闭HEBC后不复现）\n傅华 20250725", 3 ], [ "外屏图库2K低视频无控件播放视频缩放存在绿竖线（关闭HBC后不复现） 傅华 20250725", 2 ] ] }, { "DTS2025072627868": [ "https://example.com/image2.png", [ "图像识别\n测试样例二\nLLM结果", 4 ], [ "图像识别测试样例二 OCR结果", 1 ] ] } ] # 处理包含换行符的文本 def format_text(text): """ 将文本中的换行符转换为HTML换行标签 """ return text.replace(&#39;\r\n&#39;, &#39;<br>&#39;).replace(&#39;\n&#39;, &#39;<br>&#39;).replace(&#39;\r&#39;, &#39;<br>&#39;) # 获取图片缩略图 def get_image_thumbnail(url): try: response = requests.get(url, timeout=5) img = Image.open(BytesIO(response.content)) img.thumbnail((200, 200)) # 稍微放大图片尺寸 buffered = BytesIO() img.save(buffered, format="PNG") img_base64 = base64.b64encode(buffered.getvalue()).decode(&#39;utf-8&#39;) return f"data:image/png;base64,{img_base64}" except Exception as e: return None # 生成HTML报告 def generate_html_report(results): # CSS样式 css = """ <style> body { font-family: Arial, sans-serif; margin: 20px; } .container { max-width: 1200px; margin: 0 auto; } .header { text-align: center; margin-bottom: 30px; } .test-case { border: 1px solid #ddd; border-radius: 5px; padding: 15px; margin-bottom: 20px; background-color: #f9f9f9; box-shadow: 0 2px 4px rgba(0,0,0,0.1); } .dts-id { font-weight: bold; font-size: 18px; margin-bottom: 10px; color: #333; } .content-grid { display: grid; grid-template-columns: 1fr 2fr 2fr; gap: 20px; } .section { border: 1px solid #eee; padding: 10px; border-radius: 4px; background-color: white; } .section-title { font-weight: bold; margin-bottom: 8px; color: #2c3e50; border-bottom: 1px solid #eee; padding-bottom: 5px; } .image-container { text-align: center; } .image-container img { max-width: 100%; height: auto; border: 1px solid #ddd; border-radius: 4px; } .result-content { white-space: pre-line; line-height: 1.5; padding: 8px; background-color: #f8f9fa; border-radius: 4px; min-height: 150px; } .metrics { margin-top: 8px; font-size: 14px; color: #666; } .footer { margin-top: 30px; text-align: center; font-size: 14px; color: #777; } .summary { background-color: #e8f4fd; padding: 15px; border-radius: 5px; margin-bottom: 20px; } .summary-item { margin-bottom: 10px; } </style> """ # 计算性能指标 llm_times = [r[&#39;llm_time&#39;] for r in results] ocr_times = [r[&#39;ocr_time&#39;] for r in results] avg_llm = sum(llm_times) / len(llm_times) avg_ocr = sum(ocr_times) / len(ocr_times) diff_percent = (avg_llm - avg_ocr) / avg_llm * 100 if avg_llm > 0 else 0 # 生成图表 chart_data = generate_chart_data(results) # 生成测试用例列表 test_cases_html = "" for r in results: # 格式化结果文本 llm_formatted = format_text(r[&#39;llm_result&#39;]) ocr_formatted = format_text(r[&#39;ocr_result&#39;]) # 图片处理 image_html = "" if r[&#39;image_base64&#39;]: image_html = f"<img src=&#39;{r[&#39;image_base64&#39;]}&#39; alt=&#39;测试图片&#39;>" else: image_html = "<div class=&#39;image-error&#39;>⚠️ 图片加载失败</div>" test_cases_html += f""" <div class="test-case"> <div class="dts-id">测试用例: {r[&#39;dts_id&#39;]}</div> <div class="content-grid"> <div class="section image-container"> <div class="section-title">测试图片</div> {image_html} </div> <div class="section"> <div class="section-title">LLM解析结果</div> <div class="result-content">{llm_formatted}</div> <div class="metrics">耗时: <b>{r[&#39;llm_time&#39;]} 秒</b></div> </div> <div class="section"> <div class="section-title">OCR解析结果</div> <div class="result-content">{ocr_formatted}</div> <div class="metrics">耗时: <b>{r[&#39;ocr_time&#39;]} 秒</b></div> </div> </div> </div> """ # 生成完整的HTML报告 timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S") html = f""" <!DOCTYPE html> <html> <head> <title>LLM与OCR识别性能对比报告</title> <meta charset="UTF-8"> {css} </head> <body> <div class="container"> <div class="header"> <h1>LLM与OCR识别性能对比分析报告</h1> </div> <div class="summary"> <h2>性能概览</h2> <div class="summary-item"><b>测试用例数量:</b> {len(results)}</div> <div class="summary-item"><b>LLM平均耗时:</b> {avg_llm:.2f} 秒</div> <div class="summary-item"><b>OCR平均耗时:</b> {avg_ocr:.2f} 秒</div> <div class="summary-item"><b>性能差异:</b> OCR比LLM快 {diff_percent:.1f}%</div> </div> <h2>详细测试结果</h2> {test_cases_html} <h2>耗时对比分析</h2> <div style="text-align: center;"> <img src="data:image/png;base64,{chart_data}" alt="耗时对比图"> </div> <div class="footer"> 报告生成时间: {timestamp} </div> </div> </body> </html> """ return html # 生成图表并返回base64数据 def generate_chart_data(results): dts_ids = [r["dts_id"][-6:] for r in results] llm_times = [r["llm_time"] for r in results] ocr_times = [r["ocr_time"] for r in results] plt.figure(figsize=(12, 6)) # 绘制对比柱状图 bar_width = 0.35 x = range(len(dts_ids)) plt.bar(x, llm_times, width=bar_width, label=&#39;LLM识别&#39;, color=&#39;#3498db&#39;) plt.bar([i + bar_width for i in x], ocr_times, width=bar_width, label=&#39;OCR识别&#39;, color=&#39;#2ecc71&#39;) # 添加数据标签 for i, v in enumerate(llm_times): plt.text(i, v + 0.1, f"{v}s", ha=&#39;center&#39;, fontsize=9) for i, v in enumerate(ocr_times): plt.text(i + bar_width, v + 0.1, f"{v}s", ha=&#39;center&#39;, fontsize=9) plt.xlabel(&#39;测试用例&#39;) plt.ylabel(&#39;耗时(秒)&#39;) plt.title(&#39;LLM vs OCR 耗时对比&#39;) plt.xticks([i + bar_width/2 for i in x], dts_ids) plt.legend() plt.grid(axis=&#39;y&#39;, alpha=0.3) plt.tight_layout() # 将图表保存为base64 buf = BytesIO() plt.savefig(buf, format=&#39;png&#39;, dpi=120) plt.close() buf.seek(0) return base64.b64encode(buf.read()).decode(&#39;utf-8&#39;) # 主程序 if __name__ == "__main__": # 处理数据 results = [] for entry in json_data: dts_id, data = list(entry.items())[0] img_url = data[0] llm_result, llm_time = data[1] ocr_result, ocr_time = data[2] # 获取图片缩略图(base64) image_base64 = get_image_thumbnail(img_url) results.append({ "dts_id": dts_id, "image_base64": image_base64, "llm_result": llm_result, "llm_time": llm_time, "ocr_result": ocr_result, "ocr_time": ocr_time }) # 生成HTML报告 report_html = generate_html_report(results) # 保存HTML文件 with open(&#39;performance_report.html&#39;, &#39;w&#39;, encoding=&#39;utf-8&#39;) as f: f.write(report_html) print("✅ HTML性能分析报告已生成: performance_report.html") ``` ## 代码解释 ### 1. 列表式布局设计 使用三栏网格布局清晰展示每个测试用例的三部分内容： ```html <div class="content-grid"> <div class="section image-container">测试图片</div> <div class="section">LLM解析结果</div> <div class="section">OCR解析结果</div> </div> ``` - **图片区域**：居中显示200×200缩略图 - **LLM结果区域**：保留原始换行格式展示结果 - **OCR结果区域**：独立展示OCR识别结果 ### 2. 关键功能实现 1. **图片处理优化**： ```python def get_image_thumbnail(url): # 获取并压缩图片 # 返回base64编码的图片数据 ``` - 支持HTTPS图片获取 - 自动生成缩略图优化加载速度 - 错误处理确保图片加载失败不影响整体 2. **文本格式处理**： ```python def format_text(text): return text.replace(&#39;\n&#39;, &#39;<br>&#39;) ``` - 将换行符转换为HTML换行标签 - 保留原始文本结构 3. **图表生成**： ```python def generate_chart_data(results): # 创建柱状图 # 返回base64编码的图表数据 ``` - LLM(蓝色)和OCR(绿色)对比柱状图 - 每个柱子上方显示具体耗时 - 直接嵌入HTML无需额外文件 ### 3. 响应式设计 ```css .content-grid { display: grid; grid-template-columns: 1fr 2fr 2fr; gap: 20px; } @media (max-width: 768px) { .content-grid { grid-template-columns: 1fr; } } ``` - 桌面端：三栏并排显示 - 移动端：自动切换为单列布局 - 自适应图片大小 ### 4. 性能概览区域 ```html <div class="summary"> <h2>性能概览</h2> <div><b>测试用例数量:</b> 2</div> <div><b>LLM平均耗时:</b> 3.50 秒</div> <div><b>OCR平均耗时:</b> 1.50 秒</div> <div><b>性能差异:</b> OCR比LLM快 57.1%</div> </div> ``` - 顶部展示关键性能指标 - 清晰对比LLM和OCR的性能差异 - 突出显示最重要的数据 ## 使用说明 1. 将实际JSON数据替换`json_data`变量 2. 运行脚本： ```bash python performance_report.py ``` 3. 打开生成的`performance_report.html`文件 ## 输出效果示例 每个测试用例独立显示为卡片式布局： ``` [测试用例: DTS2025072627867] ┌──────────────┬───────────────────────┬───────────────────────┐ │ 测试图片 │ LLM解析结果 │ OCR解析结果 │ │ │ │ │ │ [图片] │ 外屏图库2K │ 外屏图库2K低视频无控件 │ │ │ 4K视频无控件播放 │ 播放视频缩放存在绿竖线 │ │ │ 视频缩放存在绿竖线 │ (关闭HBC后不复现) │ │ │ (关闭HEBC后不复现) │ 傅华 20250725 │ │ │ 傅华 20250725 │ │ │ │ │ │ │ │ 耗时: 3 秒 │ 耗时: 2 秒 │ └──────────────┴───────────────────────┴───────────────────────┘ [测试用例: DTS2025072627868] ┌──────────────┬───────────────────────┬───────────────────────┐ │ 测试图片 │ LLM解析结果 │ OCR解析结果 │ │ │ │ │ │ [图片] │ 图像识别 │ 图像识别测试样例二 │ │ │ 测试样例二 │ OCR结果 │ │ │ LLM结果 │ │ │ │ │ │ │ │ 耗时: 4 秒 │ 耗时: 1 秒 │ └──────────────┴───────────────────────┴───────────────────────┘ ``` 最后包含柱状图对比LLM和OCR在不同测试用例上的耗时差异。
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值