只有图片拼接的html页面图片之间有白条的解决方法

最新推荐文章于 2024-04-30 11:03:18 发布

转载最新推荐文章于 2024-04-30 11:03:18 发布 · 746 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/xyyt/p/6084583.html

文章标签：

#前端 #ViewUI

本文介绍了一种解决网页中图片排列出现间隙的方法，通过调整图片父容器的行高(line-height)为0来实现无缝拼接。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

有时候会有这样的页面，整个页面也就是几张切好的图片组成，但是把这些图片使用代码拼接好，又总会出现图片间有白条的问题，如下图：

解决方法：给图片的父容器添加 line-height: 0; 就好了，因为body/div之类的标签默认的都会有行高属性，即时是图片，也会受这个默认样式的影响

转载于:https://www.cnblogs.com/xyyt/p/6084583.html

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_30274627

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

一篇万字博文带你入坑爬虫这条不归路【万字图文】

孤寒者的博客

07-09

94万+

一篇万字博文带你入坑爬虫这条不归路【万字图文】

14、HTML5 媒体与图形：SVG 与 Canvas 的深度探索

最新发布

08-01

本文深入探讨了 HTML5 中 SVG 和 Canvas 在媒体与图形处理方面的应用，重点分析了 SVG 与 `<video>` 元素的交互方式，包括遮罩、控件定义和滤镜效果的应用。同时，详细介绍了 Canvas 在视频帧绘制、平铺处理及性能优化方面的实现方法，并通过代码示例展示了具体操作步骤。文章还比较了 SVG 和 Canvas 的优缺点，提供了技术选择的决策流程图，并展望了未来发展趋势。适合希望深入了解 HTML5 图形与视频处理技术的开发者阅读。

参与评论您还未登录，请先登录后发表或查看评论

html并排放多张图片时出现分割的白条

z2431435的博客

01-18

607

<img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2345536007,2371784920&fm=26&gp=0.jpg" width="100" height="100" alt="孙笑川的美图"><img src="https://ss1.bdstatic.com/70cFuXSh_Q1YnxGkpoWK1HF6hhy/it/u=2345536007,2371784920&f

html背景图片有白边,在网页中插入无背景色图片有白边是怎么回事啊

weixin_35460054的博客

06-04

1134

2006-05-06网页制作在网页制作的时候。怎么样在已经这个简单你如果会用fireworks，在fireworks里面将图片切片(原则是将你要加文字的那一个部分切除来)，导出切片，导入Dreamwaver将你的切片设置为背景，做法是，在里面加上background=“切片URL” 然后把去掉，换成你要加的问题如果你没有达到这个水平，或者你不会fireworks直接把图片设置为背景，这里有点小技巧...

html背景图片底部有白色框,CSS的秘密——背景和边框（下）

weixin_29290259的博客

06-10

656

重复的几何图案很好，但是会有一点无聊。在大自然中几乎没有像相同的瓷砖一样重复的事物。即使是重复的元素，也总是存在变化和随机性。例如一大片花丛，规则的排列足以让其很漂亮，但是足够的随机性也足够让其变得有趣。没有两朵花是一模一样的。这就是我们要让背景图案看上去尽可能自然的原因。复制随机性可能是具有挑战性的，因为CSS不提供任何固有的随机性能力。让我们以条纹来举例。假设我们想要随机颜色(为简化难度，固定...

html 中加入了一条白线,html-在特定浏览器宽度下,白线出现在渐变填充div的末尾...

weixin_39638014的博客

05-31

230

我有一个ID为#gradient_div的div,其背景图像设置为线性渐变.仅在某些浏览器窗口宽度下,线性渐变的末尾与div #gradient_div的末尾之间才出现缝隙.当我拉伸和收缩浏览器窗口时,这条白线消失并重新出现.似乎与边距有关：>当我将边距设置为margin：0 1％;时,将显示while行在特定的窗口宽度.当窗口宽度以1％结尾时,白线出现在1％例如68-92的范围：468px...

用cropper.js实现图片合成

gongxuanyue的博客

12-09

808

用cropper.js实现图片合成 1.html的头部和尾部分别引入cropper的css和js文件; <head> <link rel="stylesheet" href="路径/cropper.min.css"> </head> <body>  <div...

spring+springmvc+mybatis整合+图片上传+展示到Jsp页面

IT-Andy

07-05

1690

小编也是刚学习java一个月的小白，做这个图片上传和展示。百度了很多资料，就没看到有成功的，现在做出来，记录一下，同时也希望大神们给予更好的思路，小编在此深表感谢！关于spring+springmvc+mybatis整合，这里就不介绍了，需要了解的话，请点击了解spring+springmvc+mybatis整合！首先看看，做出来的效果图！上传图片：列表展示：(图片展示) ...

微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle

weixin_30426957的博客

07-26

4236

这两天因为要做一个带背景的小程序头，哭了，小程序导航栏有背景也就算了，还得让导航栏上的背景顺下来，心态小崩。现在可以单独设置一个页面的小程序头了，但是前提是要微信7.0以上的版本，考虑到兼容性问题，还是不要贸然的上了，所以用老版本的替换所有页面的小程序头来做。参考了jiuyucha的文章,但是没有解决自定义背景的和返回按钮的颜色的问题，还有因为IOS的橡皮筋效果，对IOS端不太...

html图片白边的解决方式

weixin_45576316的博客

04-19

3489

在日常的写html页面时，原生代码经常性的会引入图片，我们也经常性的会让图片宽度等于父盒子宽度的100%，高度自适应，但是此时会出现一个问题，图片下方总有撑开的一小部分，这里我将父盒子背景颜色改成黑色，以便观察修改前的代码 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style&

图片连接处出现白线

風缘的博客

11-28

7790

最近做移动端h5活动页，涉及到多图片拼接，遇到了一个坑就是图片连接处出现白线，当然查资料都说是img自身属性是inline-block导致，只要父元素设置font-size：0或者设置img display: block; 便可。但是我设置了没有用，这条线不是所有的机型都有，而且页面滚动之后又消失，我琢磨半天，各种尝试，发现把图片高度减少（增加）1px就解决了。因为我们的项目是用postcss-p...

CSS | 解决html中img标签图片底部存在空白缝隙的问题

青春木鱼的博客

06-22

6679

在不对垂直对齐方式进行调整的状况下，图片（底部）默认是和文本基线对齐（baseline）的，因为基线对齐，所以，图片的下方就会产生一条空白缝隙的状况

html2canvas生成图片底部出现白边儿的解决方法

hhkongbai的博客

06-21

3191

可能是由于像素渲染问题导致的。移动设备的屏幕像素密度（Pixel Density）较高，有时会导致在两个相邻元素之间出现细小的间隙或白线。使用html2canvas的时候，生成的图片底部出现了白边。将canvas画布高度调小1像素。

图片img底部出现空白边距

kaolagirl的博客

04-30

487

因为图片是行内元素，默认的图片对齐方式为vertical-align:baseline 基线对齐。baseline对齐方式导致图片并不是与div的真实底部对齐，而是与文基线对齐。文基线就是字母x的下边缘，即使没有文字，也会有空隙。2、给img（图片）设置vertical-align: bottom;1、给img（图片）设置display: block;

html2canvas生成图片出现白边儿的解决方法

leng0920的博客

11-18

4596

html: 生成按钮: <div class="share-btn" @click="generatePoster">生成图片</div> 海报内容: <div class="s-page" id="sPage" v-show="!poster"> <img src="https://eventimg.oss-cn-shenzhen.aliyuncs.com/micro_station/vr_ar/share_img.p.

img 图片底部会有白色区域

weixin_33875839的博客

12-28

293

原因：标签是分成区块和内联块 2种一个标签显示一行的称为区块，如（段落P，标题H系列，DIV等）若标签能在一行显示N个，表明此标签为内联块，如（<a>,<img>,<input>）区块和内联块最大的区别就是，区块可以设置宽、高、居中对齐等操作，而内联块...

网页有筛选功能，筛选后网址不变，这种怎么爬数据

07-25

<think>我们面对的是一个动态加载的网页，特别是当进行筛选操作后，URL不变，但内容更新。这通常是通过AJAX技术实现的。要爬取这样的数据，我们需要分析网页背后的网络请求，找到实际传输数据的请求，然后模拟这个请求来获取数据。步骤： 1. 使用浏览器的开发者工具（通常按F12打开）监控网络活动。 2. 进行筛选操作，观察在筛选过程中浏览器发送了哪些请求。 3. 找到包含我们所需数据的请求（通常是XHR请求），分析该请求的URL、请求方法、请求头以及请求体（如果有的话）。 4. 用Python模拟这个请求，获取数据（通常是JSON格式）。 5. 解析返回的数据，提取所需信息。根据引用[1]和[3]，我们知道这种网页是动态加载的，通过AJAX与服务器交互。引用[2]提供了一个例子，在翻页时，URL中的参数（如pn）发生了变化，但基本URL不变。假设我们遇到的情况类似，筛选操作可能会改变请求中的某些参数。具体操作： 1. 打开开发者工具，切换到“网络”(Network)选项卡，并选择“XHR”过滤。 2. 在网页上进行筛选操作，观察出现的请求。 3. 找到携带数据的请求，查看其详细信息（Headers和Payload）。 4. 复制这个请求的URL和必要的头部信息（如User-Agent, Referer, 以及可能的Token等）。 5. 根据请求方法（GET或POST）构建请求。例如，如果是GET请求，参数通常在URL中，我们可以直接构造URL。如果是POST请求，我们需要构造表单数据。下面是一个示例代码，假设我们找到一个POST请求，其参数为form-data格式： ```python import requests url = "https://example.com/api/data" # 替换为实际的请求URL # 请求头，至少需要User-Agent，根据实际情况添加其他头 headers = { "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36", "Referer": "https://example.com/page", # 替换为实际的Referer "X-Requested-With": "XMLHttpRequest" # 如果是AJAX请求，有时需要这个头 } # 筛选条件对应的参数，根据实际请求的Payload填写 data = { "param1": "value1", "param2": "value2", # ... 其他参数 } response = requests.post(url, headers=headers, data=data) # 如果返回的是JSON，可以直接解析 result = response.json() # 处理结果，提取数据 # ... ``` 如果是GET请求，参数通常在URL中，例如： ```python import requests # 注意URL中包含了查询参数 url = "https://example.com/api/data?param1=value1&param2=value2" headers = { "User-Agent": "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/91.0.4472.124 Safari/537.36", "Referer": "https://example.com/page" } response = requests.get(url, headers=headers) result = response.json() ``` 注意：有些网站可能会对请求进行验证，比如需要cookies，或者需要携带特定的token。这些都需要在请求头或请求参数中设置。另外，如果网站有反爬措施，可能需要更复杂的处理，如使用会话（Session）保持cookies，或者处理动态生成的token等。如果筛选操作涉及到多个步骤，可能需要先获取初始页面，提取一些动态生成的参数（如token），然后再发送筛选请求。总结：关键是通过开发者工具找到实际的数据请求，然后模拟这个请求。如果无法找到具体的请求，或者请求参数非常复杂，可以考虑使用Selenium等工具模拟浏览器操作，直接获取渲染后的页面内容。但这种方法效率较低。根据引用[3]的经验，我们首先应该尝试通过分析网络请求来获取数据，这是更高效的方式。 §§相关问题§§ 1. 如何分析网页的AJAX请求？ 2. 使用Selenium爬取动态网页的步骤是什么？ 3. 如何应对爬虫中的反爬措施（如验证码、Token等）？</think>### 爬取动态筛选数据的解决方案当网页筛选后网址不变时，通常是因为网站使用了 **AJAX 动态加载技术**。这类网页通过 JavaScript 在后台与服务器交互，无需刷新整个页面即可更新内容。以下是完整的爬取方案： --- ### 一、技术原理分析 1. **AJAX 工作机制** 筛选操作会触发 JavaScript 向服务器发送 **HTTP 请求**（通常是 POST 或带参数的 GET 请求），服务器返回结构化数据（如 JSON），前端再动态渲染页面[^1]。 2. **URL 不变的原因** 筛选参数通过以下方式传递： - 隐藏的表单数据 - URL 查询参数（如 `?page=2&filter=value`） - HTTP 请求头（如 `X-Requested-With: XMLHttpRequest`） --- ### 二、爬取步骤（以百度图片为例） #### 1. **分析网络请求** - 打开浏览器开发者工具（F12 → Network 标签） - 进行筛选操作（如翻页/选择分类） - 观察新增的 **XHR/Fetch 请求**（如图） ```mermaid graph LR A[筛选操作] --> B[开发者工具 Network 面板] B --> C{查找 XHR 请求} C --> D[分析请求参数] ``` #### 2. **提取关键参数** 以引用[2]的百度图片为例： ```python # 原始URL（第一页） url = 'https://image.baidu.com/search/flip?word=桥梁' # 第二页URL变化（关键参数 pn=20） url_page2 = 'https://image.baidu.com/search/flip?word=桥梁&pn=20' ``` **核心参数**： - `pn`: 页码（每页20条 → 第n页：`pn = (n-1)*20`） - `word`: 搜索关键词 - `gsm`: 加密参数（需动态获取） #### 3. Python 爬虫实现 ```python import requests import json def crawl_filtered_data(keyword, max_page): headers = {'User-Agent': 'Mozilla/5.0'} # 模拟浏览器 for page in range(max_page): params = { "word": keyword, "pn": page * 20, # 动态计算页码 "gsm": "3c" # 实际需从首页源码提取 } response = requests.get( url="https://image.baidu.com/search/flip", params=params, headers=headers ) # 解析JSON数据（实际需处理加密结构） data = response.json() print(f"第{page+1}页数据：", data["list"]) ``` --- ### 三、通用解决方案 | 情况 | 解决方法 | 工具 | |------|----------|------| | 参数在URL中 | 拼接查询参数 | `requests.get(params={...})` | | 参数在请求体 | 发送POST请求 | `requests.post(data={...})` | | 复杂加密 | 逆向JavaScript | PyExecJS / Selenium | | 无法解析请求 | 无头浏览器渲染 | Selenium / Playwright | --- ### 四、注意事项 1. **动态参数处理** 部分网站（如百度）的 `gsm` 参数需从首页 HTML 或 JS 代码中提取，可能需要正则表达式： ```python import re first_page = requests.get(first_url).text gsm = re.search(r'"gsm":"(\w+)"', first_page).group(1) ``` 2. **反爬对策** - 添加 `Referer` 和 `Cookie` 请求头 - 使用 IP 代理池（如 Scrapy 的 `RotatingProxies`） - 模拟人类操作延迟（`time.sleep(1)`） 3. **数据解析技巧** 动态数据通常返回 JSON，但可能被加密，需： ```python # 处理非标准JSON data_str = response.text.split("(")[1].strip(")") data = json.loads(data_str) ``` > 提示：90% 的动态网站可通过分析 **XHR 请求** 解决，剩余 10% 需用 Selenium 模拟浏览器[^3]。