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

最新推荐文章于 2023-06-26 14:41:12 发布

weixin_33829657

最新推荐文章于 2023-06-26 14:41:12 发布

阅读量748

点赞数

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5b4ccaff6fb9a04fbb1116a4

本文探讨了使用img标签作为背景图片时出现的边框问题，并提供了多种解决方案，包括更改标签、使用CSS调整透明度及onerror属性掩饰边框。

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

img标签加背景图片始终有border？

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

取消背景图片后border还在

解决办法

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

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

 img[src=""]{
    opacity: 0;
 }
复制代码

在img里面加一个onerror的图片，来替换不显示的情况，这个图片可以跟背景色一样？或者别的随你，主要是为了掩饰这个border。

博主遇到过这个问题，果断选择了换标签哈哈，但是网上搜索的时候，发现并没有什么文章对这个问题进行总结，所以我总结一下，希望可以帮到踩到坑的童鞋~

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_33829657

关注关注

0
点赞
踩
0

收藏

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

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

如何使用CSS设置网页中的图片属性？

a451319296的博客

05-12

2253

本文将帮助读者通过学习CSS掌握如何让网页中的图片变得更加美丽。首先，我们会介绍一些常用的CSS样式，例如border-radius、box-shadow和outline等。这些样式可以让图片具有圆角、阴影和边框等效果，从而提升图片的美观度。其次，我们还会介绍如何使用CSS调整图片的尺寸、透明度和位置等属性，让图片更好地融入到网页中。最后，我们会分享一些实用的CSS技巧，例如如何为鼠标悬停在图片上时添加特效、如何创建响应式图片等。通过本文的学习，读者可以轻松地打造出漂亮的网页图片效果。

img标签默认有外边距吗_img 灰色默认外边框的去除

weixin_39717029的博客

12-22

1028

最近在做一个小游戏时发现了一个问题，总是在弹出img时先出现一个灰色的边框，所以为了查找问题，查找了一些关于img 默认边框的小知识点。在这里整理了一些知识点：一. 下面代码都试验过后会发现，img会有外边框，这个也是使用img元素的一个坑一般在img为空时出现，因为浏览器找不到图，就会用一个边框来代替img外边框 .container-img {display: inlin...

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

img标签添加背景图，会有边框

weixin_33941350的博客

11-22

2029

问题：img标签添加背景图，会有边框解决方法：给img再设置一下src，src为透明png即可。 ---------------------------我是分割线------------------------ 转载于:https://www.cnblogs.com/bagnliu/p/7879432.html...

<img> 标签的border等属性尽量少用

weixin_30787531的博客

07-14

424

img 元素可定义一副图像。HTML 与 XHTML 之间的差异在 HTML 中，<img> 标签没有结束标签。在 XHTML 中，<img> 标签必须被正确地关闭。在 HTML 4.01 中，不赞成使用 image 元素的 "align"、"border"、"hspace" 以及 "vspace" 属性。在 XHTML 1.0 Strict DTD 中，不支持 image...

去掉img默认边框

qq_43405603的博客

12-06

968

img:not([src]) { opacity: 0; }

img标签如何去除边框？

qq_41964720的博客

06-26

2226

使用CSS的一个否定伪类选择器，将没有src属性的img的透明度设置为0，就可以解决图片有边框的问题。img标签只设置了宽度和高度，没有设置src属性，图片出现了边框。

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 中插入图片。以下是设置图片的常见方法和属性说明...

img 标签注意默认img标签，有一个1px的边框 img{ border: 0; }

weixin_30376163的博客

10-23

1118

默认img标签，有一个1px的边框 img{ border: 0; } 转载于:https://www.cnblogs.com/mingerlcm/p/9138079.html

百万前端之去除img标签出现的边框

qsadmjn的博客

09-19

5306

在html中，给img标签设置百分百自适应div大小时，就是出现一个默认边框，这是因为img标签在没有scr属性值时给自己添加一个默认边框，即使给img标签设置css属性border:none;就像上图一样，作为一个上传图片作为零时展示的图片img标签，出现了不合时宜的border框，显得非常的不美观。其实去除并不困难，原理也非常简单。相信大家看到了也是恍然大悟，竟然是opacity属性！给img添加这个css属性后，在img没有src属性时，img标签也不会出现边框了。

HTML img 设置border: none; 仍显示边框

soindy

05-09

9517

上图所示,设置了border: none 仍然有边框,这是因为设置了height 和 weight, 去掉即可. 原理稍后研究~

HTML <img> 标签的 border 属性

weixin_33759269的博客

06-04

703

定义和用法 <img> 标签的 border 属性规定图像周围的边框的宽度，就是说可以增加或去掉图像的边框。注释：默认地，图像是没有边框的（除非图像在 a 元素内部）。浏览器通常会把代表超链接的图像（例如包含在 <a> 标签中的图像）显示在两个像素宽的边框里面，以表示读者可以通过选择这个图像来访问相关联的文档。使用 border 属性和一个用像素表示的宽度值就...

img上方出现1px空白间隙

qq_34458968的博客

01-11

669

1.使用浮动属性float 2.将图片高度设置为奇数

＜img＞图片前后有1px像素空白问题

v2canal的博客

05-08

1255

在制作js轮播图时，发现几个连着的图片中间会有一点空隙这里空隙为div的红色背景原因：浏览器将img当作文字元素保留了行高解决方法：一：设置div：font-size=0 二：设置div：line-height=0 三：设置所有img display=block 完美解决 ...

img白边问题

weixin_40793759的博客

05-13

863

像这样img多余的’border‘不知道大家有没有开发中遇到过： <img> has no baseline, so when images are used in an inline formatting context with vertical-align: baseline, the bottom of the image will be placed on the text baseline.文档 <img>元素没有基线，因此当图像在具有vertical align:b

img标签的一些问题

weixin_44164982的博客

10-10

1108

1 img标签空白像素问题实际上，这其实是inline元素搞的鬼。在html5和css3中，图片文字等内联元素，它默认对齐方式都是和它的父级的 baseline 去进行对齐的，但是你对齐的是 baseline，撑开高度的却是元素整体的高度（bottom line），这样肯定就会造成一定的间隙，也就是我们上文出现的问题了。第一种解决方案：把img变成块元素：display：block；第二种解决方案：修改一下它的垂直对齐方式：vertical-align：middle、top、bottom； ..