img标签src不给路径就会出现边框
<img/>
在src
加载失败或没有给的,浏览器会自动给img
加上边框。
如下图这样:
产品觉得影响美观,一定要pass掉。
原码是这样:
.ctn{
position: relative;
width: 2.8rem;
height: 2.8rem;
border-radius: 3px;
overflow: hidden;
background: #FFF;
}
.ctn .title{
position: absolute;
top: 0;
width: 2.8rem;
height: 2.8rem;
background:rgba(0,0,0,.35) ;
color: #FFF;
font-size: .52rem;
font-weight: bold;
padding:0 .4rem;
}
.ctn img{
width: 2.6rem;
height: 2.2rem;
margin: .3rem auto;
object-fit: cover;
background: url(images/120X120.jpg?201608012) no-repeat center;
background-size: 2.2rem;
}
<div class="ctn">
<div class="title sn-flex center">
<p>休闲西装</p>
</div>
<img src=""/>
</div>
百度一下,在知乎上找到了解决方案,链接在这https://www.zhihu.com/question/27426689
基于能用css
实现就不用js
的原则,选择了以下的解决方案:
给img
包个div
<div class="ctn">
<div class="title sn-flex center"><p>收腰款</p></div>
<div class="img-ctn">
<img src="temp/app_200x200.jpg"/>
</div>
</div>
.ctn .img-ctn{
width: 2.6rem;
height: 2.2rem;
margin: .3rem auto;
overflow: hidden;
}
.ctn .img-ctn img{
width: -webkit-calc(2.6rem + 2px);
height: -webkit-calc(2.2rem + 2px);
width: calc(2.6rem + 2px);
height: calc(2.2rem + 2px);
background: url(images/120X120.jpg?201608012) no-repeat center;
background-size: 1.8rem;
margin: -1px;
object-fit: cover;
}
but,有问题,无图片时上下的border
是隐藏了,左右无论怎么样都隐藏不了,暂时没查出来问题,于是改成了这样:
.ctn .img-ctn{
width: 2.6rem;
height: 2.2rem;
margin: .3rem auto;
overflow: hidden;
background: url(images/120X120.jpg?201608012) no-repeat center;
background-size: 1.8rem;
}
.ctn .img-ctn img{
width: inherit;
height: inherit;
object-fit: cover;
}
/*无src隐藏*/
.ctn .img-ctn img[src='']{
visibility: hidden;
}
后来,在控制台调试时,忽然灵光乍现,FUCK,是reset
样式的问题。
原来,base.css
对img
做了这个
img {
max-width: 100%;
}
hehe,重新又改成这样:
.ctn .img-ctn{
width: 2.6rem;
height: 2.2rem;
margin: .3rem auto;
overflow: hidden;
}
.ctn .img-ctn img{
width: -webkit-calc(2.6rem + 2px);
height: -webkit-calc(2.2rem + 2px);
width: calc(2.6rem + 2px);
height: calc(2.2rem + 2px);
background: url(images/120X120.jpg?201608012) no-repeat center;
background-size: 1.8rem;
margin: -1px;
/*就是这货*/
max-width: none;
object-fit: cover;
}
ok,提交给开发,终于可以偷懒一会了。
however,改变来的太快。开发发来了一张图:
去开发机上调试一下,瞬间感受到了深深的恶意。
原来图片的背景图层是透明的,盒子模型的渲染层级是color>src>background-image>background-color
,图片空白区域透明自然就显示背景图片了。
img{
background: red url(images/120X120.jpg?201608012) no-repeat center;
}
<img src=".png">
感觉自己的洪荒之力已经用完了。。。。
at the end,为了规避这种图片出现,直接不给背景图片了,还是通过模板引擎来判断吧
<img src="{$src||'images/120X120.png'}"/>
多好,一下子就解决了。
白白绕了这么一大圈
img标签src不给路径就会出现边框的更多相关文章
- img标签src不给路径就会出现边框————记一次二笔的编码经历
<img/>在src加载失败或没有给的,浏览器会自动给img加上边框. 如下图这样: 产品觉得影响美观,一定要pass掉. 原码是这样: .ctn{ position: relative; ...
- 转.HTML中img标签的src属性绝对路径问题解决办法,完全解决!
HTML中img标签的src属性绝对路径问题解决办法,完全解决 需求:有时候自己的项目img的src路径需要用到本地某文件夹下的图片,而不是直接使用项目根目录下的图片. 场景:eclipse,to ...
- 关于img标签浏览器自带的边框,清除边框的解决方式(即img[src=""] img无路径情况下,灰色边框去除解决方法)
详解img[src=""] img无路径情况下,灰色边框去除解决方法 1.Js解决办法 <html> <head> <meta charset=&qu ...
- img标签src=""和background-image:url();引发两次请求页面bug
img标签src=""和background-image:url();引发两次请求页面bug 具体原因是,在img 对象的src 属性是空字符串("")的时 ...
- php读取出字符串中的img标签中的图片路径
php读取出字符串中的img标签中的图片路径 $pageContents = '字符串,带img标签'; $pageContents = str_replace('\"','"', ...
- htm中的 src未指定具体路径的话 默认查找当前文件夹
htm中的 src未指定具体路径的话 默认查找当前文件夹
- Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案
Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案 1. IE8.0 显示本地图片 img.src=本地图片路径无效的解决方案1 1.1. div来完成 ...
- ie6下使用js替换img标签src属性图片不显示的错误
首先,我必须再次强调一下,F-U-C-K I-E! 其次,简单阐述一下这个bug的出现的情况.页面中有个<a href=”javascript:void(0)” onclick=”swapImg ...
- XtraFinder到底好在哪里(标签、隐藏文件、路径拷贝与显示、从这里启动)
类似Chrome的标签 自定义工具栏可添加一个快速显示与隐藏当前目录隐藏文件的功能 拷贝路径 cd 到当前目录这个功能跟PathFinder7类似 当然还有其他很多功能,比如这个返回上级目录,
随机推荐
- bash之set命令
set命令是 Bash 脚本的重要环节,却常常被忽视,导致脚本的安全性和可维护性出问题.本文介绍它的基本用法,让你可以更安心地使用 Bash 脚本. 一.简介 我们知道,Bash 执行脚本的时候,会创 ...
- wsoj「G2016 SCOI2018 Round #12」建筑师
传送门 小半个月前的测试,现在翻出来. 考试时我和sxyA了这题. 当时随便搞了个dp,dp[i][j]表示i个数能看到j个的情况数,考虑新加入一个比之前i-1个数都小的数,能看到它的情况是它加到第一 ...
- Ajax和json一道基本的练习题
关于ajax是javaEE中最基本的操作: 下面是这道题: 基本功能: jsp+servlet+ajax实现用户信息查询,实现无刷新删除 用户信息包括 学号 姓名 出生日期 性别 操作 2017010 ...
- 2019-3-8-win10-uwp-一张图说明水平对齐和垂直对齐
title author date CreateTime categories win10 uwp 一张图说明水平对齐和垂直对齐 lindexi 2019-03-08 10:45:40 +0800 2 ...
- spring源码学习之springMVC(二)
接着上一篇.继续来看springMVC中最和我们开发中接近的一部分内容: DispatcherServlet的逻辑处理 作者写到在DispatcherServlet类中存在doGet.doPost之类 ...
- 通过游戏学python 3.6 第一季 第三章 实例项目 猜数字游戏--核心代码--猜测次数--随机函数和屏蔽错误代码 可复制直接使用 娱乐 可封装 函数
猜数字游戏--核心代码--猜测次数--随机函数和屏蔽错误代码 #猜数字--核心代码--猜测次数--随机函数和屏蔽错误代码 import random secrst = random.rand ...
- didFailWithError: Error Domain=kCLErrorDomain Code=0 “The operation couldn’t be completed. (kCLError
This error also occurs if you have Scheme/Edit Scheme/Options/Allow Location Simulation checked but ...
- img标签下多余空白BUG解决方法
在进行页面的DIV CSS排版时,遇到IE6(当然有时Firefox下也会偶遇)浏览器中的图片元素img下出现多余空白的问题绝对是常见的 对于该问题的解决方法也是“见机行事”. 1.将图片转换为块级对 ...
- 使用Spring Cache + Redis + Jackson Serializer缓存数据库查询结果中序列化问题的解决
应用场景 我们希望通过缓存来减少对关系型数据库的查询次数,减轻数据库压力.在执行DAO类的select***(), query***()方法时,先从Redis中查询有没有缓存数据,如果有则直接从Red ...
- 1、jxl导入/导出excel案例,黏贴即可运行
package junit.test; import java.io.File; import java.io.IOException; import java.util.ArrayList; imp ...