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

最新推荐文章于 2024-05-10 15:23:16 发布
置顶 最新推荐文章于 2024-05-10 15:23:16 发布
阅读量4.6k 收藏 8
点赞数 9
文章标签： 前端 html javascript css3
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/qsadmjn/article/details/126933364
版权

        在html中，给img标签设置百分百自适应div大小时，就是出现一个默认边框，这是因为img标签在没有scr属性值时给自己添加一个默认边框，即使给img标签设置css属性border:none;也是无济于事。

就像上图一样，作为一个上传图片作为零时展示的图片img标签，出现了不合时宜的border框，显得非常的不美观。其实去除并不困难，原理也非常简单。

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

相信大家看到了也是恍然大悟，竟然是opacity属性！给img添加这个css属性后，在img没有src属性时，img标签也不会出现边框了

black spider
关注
  • 9
    点赞
  • 踩
  • 8
    收藏
    觉得还不错? 一键收藏
  • 6
    评论
img标签默认有外边距吗_img 灰色默认外边框的去除
weixin_39717029的博客
12-22 927
最近在做一个小游戏时发现了一个问题，总是在弹出img时先出现一个灰色的边框，所以为了查找问题，查找了一些关于img 默认边框的小知识点。在这里整理了一些知识点：一. 下面代码都试验过后会发现，img会有外边框，这个也是使用img元素的一个坑一般在img为空时出现，因为浏览器找不到图，就会用一个边框来代替img外边框 .container-img {display: inlin...
1+xweb前端试卷及解析答案
04-19
【标签】"前端 1+xweb前端初级"表明这是针对初级前端开发者的学习材料，主要关注前端开发的基本技能。 试卷部分内容： 1. HTML元素类型：HTML中的`<title>`、`<html>`、`<img>`和`<p>`元素中，`<img>`是单标签元素...
去除img的默认边框
dakache11的博客
01-07 3003
转自https://blog.csdn.net/qq_39833794/article/details/79922355 祝工作顺利，身体健康
CSS border-image（边框图片）
最新发布
Elope_的博客
05-10 423
今天来说一下border-image 属性使用图像来作为元素的边框，以创建出丰富多彩边框效果。border-image 属性可以通过一些简单的规则，将一副图像划分为 9 个单独的部分，浏览器会自动使用相应的部分来替换边框的默认样式。
img标签如何去除边框？
qq_41964720的博客
06-26 1633
使用CSS的一个否定伪类选择器，将没有src属性的img的透明度设置为0，就可以解决图片有边框的问题。img标签只设置了宽度和高度，没有设置src属性，图片出现了边框。
去掉img默认边框
qq_43405603的博客
12-06 886
img:not([src]) { opacity: 0; }
关于img标签浏览器自带的边框，清除边框的解决方式(即img[src=""] img无路径情况下，灰色边框去除解决方法)...
weixin_34150503的博客
09-11 2239
详解img[src=""] img无路径情况下，灰色边框去除解决方法 1.Js解决办法 1 <html> 2 <head> 3 <meta charset="UTF-8"> 4 <title></title> 5 </head> 6 &...
去掉img自带边框，前端文件下载，图片转base64发送后端，图片formdata格式发送给后端
qq_52179917的博客
08-21 533
【代码】去掉img自带边框，前端文件下载，图片转base64发送后端。
前端：商品列表和小米logo制作
07-03
在制作小米logo时，我们可以使用`<img>`标签引入图片资源，然后通过CSS调整其尺寸、对齐方式等： ```html <img class="xiaomi-logo" src="xiaomi_logo.png" alt="小米"> ``` ```css .xiaomi-logo { width: 200px; ...
前端大厂最新面试题-css.docx
06-06
前端大厂最新面试题-css CSS是前端开发的基础，以下是对前端大厂最新面试题-css的总结和解释。 1. 控制元素的盒模型的属性是box-sizing。 2. 相邻选择器是+，能匹配相邻的兄弟元素。 3. 不能被子元素继承的属性...
前端兼容性问题总结(PC端)
09-27
1. **图片加a标签在IE9-中会有边框** 解决方案：为img元素添加CSS样式`border: none;`，去除图片周围的边框。 2. **rgba颜色透明度不被IE8支持** 解决方案：可以使用opacity属性，但注意会影响其内元素的透明度。...
Web前端开发初级实操考试评分细则
07-01
`<img>`标签用于插入图像，`p`标签代表段落。`border-radius`用于设置元素边框的圆角，`15px`表示圆角半径。`text-align`属性用于设置文本的对齐方式，`center`居中对齐。`transition`属性定义元素从一种样式变换到...
html图片去除边框,CSS去掉图片img边框及如何防止图片撑破DIV
weixin_33473486的博客
06-07 4049
我们常常会遇到以下情况：1、img图片多了边框，特别是链接后的图片带边框2、图片超出撑破DIV查看 CSS设置图片宽度高度下面我们通过CSS来解决这2个问题。1、img图片多了边框，特别是链接后的图片带边框有边框的图片根据以上图，我们对图片加链接，结果图片出现了边框，解决方法：我们只需在初始化IMG标签CSS即可img{ padding:0; border:0;} 加入此CSS即可消除边框CSS去...
关于img标签浏览器自带的边框，清除边框的解决方式
热门推荐
鲸落
06-04 1万+
设置img[src=""],img:not([src]) { opacity: 0;} 就可以了
如何去除img标签的默认边框
WuJiangang5112的博客
06-21 1万+
如何去除img标签的默认边框 在使用img标签过程中遇到，图片没获取到后出现默认大小边框的问题，看起来很丑。 一、有边框 <router-link to="/"><img :src="logoICO" v-if="logoICO" width="100px" height="35px" />{{logo.title}}</...
HTML关于img标签除去边框的小笔记
小宝贝儿
03-17 499
代码示例： css部分： .middle .QR_code .baidu_btm2 .icons_0{ border: none; width: 14px; height: 17px; overflow: hidden; background: url(../img/icons_441e82f.png); background-position: -...
html中如何使图片边框隐藏,css怎么去除图片边框
weixin_30715739的博客
06-03 4345
css去除图片边框的方法：1、使用css中的border属性来设置去掉img边框；2、通过“img:not([src]){opacity:0;}”去除图片边框。本文操作环境：windows7系统、HTML5&&CSS3版、Dell G3电脑。css去掉img边框1、 标签的 border 属性规定图像周围的边框的宽度，就是说可以增加或去掉图像的边框。也可以使用css中的border...
2021-08-31 清除img标签中，src为空时浏览器自带的图片边框
Kristen的博客
08-31 2067
清除img标签中，src为空时浏览器自带的图片边框 当img标签为空或为null时，图片四周将会出现浏览器自带的边框，可以通过css清除相应的边框： img[src=''], img:not([src]) { opacity: 0; } 其中img[ src=’ ’ ]是css选择器，选择了当图片src为’ '的情况； img:not([src])为css的not选择器，指选择了除含有src以外的所有img标签； 当遇上以上两种情况时，img标签设为透明，从而达到消除边框的目的 注：当src中含有内
img边框问题
水墨记忆
01-24 1052
去img边框： 或者在css样式中使用 border:0  none;  但是有这样一个问题： 当将src的内容在css中设置时： background:url('images/icon.png') no-repeat; 无论怎样设置border，图片都会有一个灰色的边框，多方尝试终于发现只要img的src不设置，这个边框就会出现 所以可以将src引用一个空白图片，但是我觉
img标签不给src就出现边框，解决办法
06-01
一般来说，如果 `img` 标签没有设置 `src` 属性，浏览器会默认显示一个带有边框的空白图片框。为了避免出现这种情况，可以通过以下两种方式来解决： 1. 使用 CSS 隐藏边框：可以通过设置 `border: none` 来隐藏边框： ```html <img style="border: none" /> ``` 2. 给 `src` 属性设置一个默认值：可以在 `img` 标签中设置一个默认的图片链接，这样即使没有设置实际图片链接，也不会显示边框了： ```html <img src="default-image.png" /> ``` 这里的 `default-image.png` 可以是一个透明的空白图片，或者是一个与实际图片风格相似的占位图片。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 6
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值