img标签设置背景图片，始终有一个像素的border怎么破？

最新推荐文章于 2025-05-28 06:12:52 发布
原创 最新推荐文章于 2025-05-28 06:12:52 发布 · 3.8k 阅读 · 4 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

本文介绍了如何解决使用img标签作为背景图片时出现的边框问题。提供了三种解决方案：更换标签、CSS透明度设置以及onerror事件处理。

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

用img标签来设置背景图片，无论你怎么给border加样式都会发现一条摆脱不掉的边框，这是浏览器为了识别img标签自带的一个类似于“占位符”的标记，就是为了告诉这里有张图片。没啥作用。怎么消除这条边框呢？

最佳解决办法：

你换个标签呗，不就是显示一张背景图么？干嘛非要用img标签？

或者

加一句css，使他没有src的时候透明度为0就可以了。

 img[src=""]{
    opacity: 0;
 }

再或者

在img里面加一个onerror的图片，来替换不显示的情况，这个图片可以跟背景色一样？或者别的随你

 

如何使用CSS设置网页中的图片属性？
a451319296的博客
05-12 2253
本文将帮助读者通过学习CSS掌握如何让网页中的图片变得更加美丽。首先，我们会介绍一些常用的CSS样式，例如border-radius、box-shadow和outline等。这些样式可以让图片具有圆角、阴影和边框等效果，从而提升图片的美观度。其次，我们还会介绍如何使用CSS调整图片的尺寸、透明度和位置等属性，让图片更好地融入到网页中。最后，我们会分享一些实用的CSS技巧，例如如何为鼠标悬停在图片上时添加特效、如何创建响应式图片等。通过本文的学习，读者可以轻松地打造出漂亮的网页图片效果。
8种方案解决移动端1px边框的问题
林恒的博客
07-05 1084
css中的1px并不等于移动设备的1px，这是由不同手机由不同像素密度，在window对象中有一个devicePixelRatio属性，他可以反应css中像素与设备的像素比。对于老项目，这种方案比较完美, 原理是把原来的所有边框去掉，通过伪类崇左border,并且transform的scale缩小一半，原先的单挑border样式设置。devicePixelRatio 的官方给的定义为： 设备物理像素和设备独立像素的比例，也就是devicePixelRatio = 物理像素 / 独立像素。
去除img 自带边框的问题 或者换成div 标签，用背景图引入
wwf1225的博客
09-21 1744
如果不用background-image而设置src=""，则没有边框；但如果用background-image则边框怎么也去不掉。百度了一下说是边框是背景时留下的间隔，但没有解决方法。不知道该如何去掉？ 你的img标签没有设置src，显示的是系统的没有图片的标记，并不是html代码的问题。，你设置一个空白图就可以了 显示边框：<img className="iconVoice" border="0" alt="" onClick={clickVoice} onTouchStart..
在 HTML 文件中添加图片的常用方法详解
最新发布
专注于与编程相关的知识内容分享
05-28 771
在网页设计中，图片是不可或缺的元素。它们能够丰富页面内容、提升视觉吸引力，并帮助用户更直观地理解信息。HTML 提供了多种方法来插入和控制图片的显示效果。本文将系统性地介绍在 HTML 文件中添加图片的常用方法，并结合代码示例和最佳实践，帮助开发者高效实现图片的展示与优化。
border.css 清除1像素边框的问题
Ada_lake的博客
10-19 788
1像素边框的问题是什么问题 如何解决1像素边框的问题 1. 1像素边框的问题是什么问题 物理像素：设备本身的像素，出厂即固定 逻辑像素: css像素，viewport上的一个小方格 像素比： 如果物理像素和逻辑像素是 1:1 时，表示一个物理像素显示一个css像素 当比例为 2:1 时，表示4个物理像素显示1个css像素 【通过js的window.devicePixelRatio来获取 OR ...
去掉img默认边框
qq_43405603的博客
12-06 968
img:not([src]) { opacity: 0; }
css 设置全屏背景图片
09-25
为了解决这一问题，通常会使用一个额外的`<div>`元素来承载`<img>`标签，并将这个`<div>`的宽度和高度设置为100%，使其能够充满整个浏览器视窗。 具体操作步骤如下： 1. 首先，在HTML的`<body>`标签内创建一个新的...
、找一张刘亦菲的头像用img标记插入图片，设置大小100*160像素。 2、做一个120*40像素的矩形，背景图片蓝天白云，边框圆角矩形
09-19
2. 创建一个120*40像素的矩形，背景是蓝天白云效果，可以使用CSS来实现，比如在一个`div`元素中设置样式。由于CSS本身并不直接支持蓝天白云背景，通常需要使用伪元素和背景图，然后添加边框圆角。下面是一个简单的...
用Vscode制作网页1、找一张刘亦菲的头像用img标记插入图片，设置大小100*160像素。 2、做一个120*40像素的矩形，背景图片蓝天白云，边框圆角矩形。图片
09-19
1. **添加图片元素**: 首先，在HTML文件中创建一个`<img>`标签，插入刘亦菲的头像。假设图片已经保存为`leiyifei.jpg`... 现在你已经有了一个包含图片和蓝天白云背景矩形的基本结构。记得替换URL为你实际的图片路径。
img 图片如何设置
02-23
最后，总结一下img标签的关键点，确保信息全面，覆盖基本设置到高级应用，帮助用户全面掌握如何在网页中正确设置图片。在网页开发中，使用 `<img>` 标签可以在 HTML 中插入图片。以下是设置图片的常见方法和属性说明...
1像素边框问题
weixin_43905830的博客
04-22 1144
在移动端web开发中，UI设计稿中设置边框为1像素，前端在开发过程中如果出现border:1px，测试会发现在某些机型上，1px会比较粗，即是较经典的移动端1px像素问题。首选先看一下，pc时代和移动端时代对1px的对比。 一、像素的理解 像素是网页布局的基础。一个像素就是计算机能够显示一种特定颜色的最小区域。当设备尺寸相同但像素变得更密集时，屏幕能显示的画面的过渡更细致，网站看起来更...
img 标签注意 默认img标签，有一个1px的边框 img{ border: 0; }
weixin_30376163的博客
10-23 1120
默认img标签，有一个1px的边框 img{ border: 0; } 转载于:https://www.cnblogs.com/mingerlcm/p/9138079.html
移动端---img标签设置了宽高但是src不给路径会出现边框，怎么去掉边框呢
beautifultian的博客
11-01 2789
今天做移动端的时候遇到这个问题: img标签设置了宽高，但是src先不给路径的时候出现了边框，如图： 我发现一个不错的方法，可以去掉img边框，如下： html: css: .selectPhoto img[src = ""]{ opacity:0; } 实现效果如下：
QT border-image和background-image引起的边框设置问题
guorong520的博客
09-10 8260
一、border-image 在一个frame中放入一张图片，设置frame的样式表，会发现边框设置没有生效。 border-image:url(:/refresh.png); border:1px solid red; 二、background-image 也在一个frame中放入一张图片，设置frame的样式表，会发现边框确实设置了，但图片没有正确显示。 background-image:...
html css 如何将图片作为背景,CSS背景图片和HTML中的img标签
weixin_39793794的博客
06-04 4660
背景图片：该图片是218*170 css内容：div{width: 100px;height: 100px;background: url(img/1.jpg);border: 2px solid red;} div{width: 500px;height: 500px;background: url(img/1.jpg);border: 2px solid red;} 背景图片的默认格式：当图片...
c语言img背景图片,img标签实现和背景图一样的显示效果只显示图片中间部分
weixin_31990755的博客
05-25 634
实现方案：.img-1 {width: 200px;height: 200px;object-fit: cover;}扩展：object-fit的其它值object-fit属性还有值，下面以一张图为例看看其他值战士的效果示例原图(长度大于宽度)：object-fit: fill; //中文释义“填充”。默认值。替换内容拉伸填满整个contentbox,不保证保持原有的比例。(比如下图拉长了)ob...
img标签如何去除边框？
qq_41964720的博客
06-26 2226
使用CSS的一个否定伪类选择器，将没有src属性的img的透明度设置为0，就可以解决图片有边框的问题。img标签只设置了宽度和高度，没有设置src属性，图片出现了边框。
背景图片的标签
m0_72699629的博客
07-20 847
一个人的世界，才是真正属于自己的世界。生活需要游戏，但不能游戏人生；生活需要歌舞，但不需醉生梦死；生活需要艺术，但不能投机取巧。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值