<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不给路径就会出现边框————记一次二笔的编码经历的更多相关文章

  1. img标签src不给路径就会出现边框

    <img/>在src加载失败或没有给的,浏览器会自动给img加上边框. 如下图这样: 产品觉得影响美观,一定要pass掉. 原码是这样: .ctn{ position: relative; ...

  2. 转.HTML中img标签的src属性绝对路径问题解决办法,完全解决!

    HTML中img标签的src属性绝对路径问题解决办法,完全解决   需求:有时候自己的项目img的src路径需要用到本地某文件夹下的图片,而不是直接使用项目根目录下的图片. 场景:eclipse,to ...

  3. 关于img标签浏览器自带的边框,清除边框的解决方式(即img[src=""] img无路径情况下,灰色边框去除解决方法)

    详解img[src=""] img无路径情况下,灰色边框去除解决方法 1.Js解决办法 <html> <head> <meta charset=&qu ...

  4. img标签src=""和background-image:url();引发两次请求页面bug

      img标签src=""和background-image:url();引发两次请求页面bug 具体原因是,在img 对象的src 属性是空字符串("")的时 ...

  5. php读取出字符串中的img标签中的图片路径

    php读取出字符串中的img标签中的图片路径 $pageContents = '字符串,带img标签'; $pageContents = str_replace('\"','"', ...

  6. htm中的 src未指定具体路径的话 默认查找当前文件夹

    htm中的 src未指定具体路径的话 默认查找当前文件夹

  7. Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案

    Atitit. IE8.0 显示本地图片预览解决方案 img.src=本地图片路径无效的解决方案 1. IE8.0 显示本地图片 img.src=本地图片路径无效的解决方案1 1.1. div来完成  ...

  8. ie6下使用js替换img标签src属性图片不显示的错误

    首先,我必须再次强调一下,F-U-C-K I-E! 其次,简单阐述一下这个bug的出现的情况.页面中有个<a href=”javascript:void(0)” onclick=”swapImg ...

  9. XtraFinder到底好在哪里(标签、隐藏文件、路径拷贝与显示、从这里启动)

    类似Chrome的标签 自定义工具栏可添加一个快速显示与隐藏当前目录隐藏文件的功能 拷贝路径 cd 到当前目录这个功能跟PathFinder7类似 当然还有其他很多功能,比如这个返回上级目录,

随机推荐

  1. eclipse从数据库逆向生成Hibernate实体类

    做项目必然要先进行数据库表设计,然后根据数据库设计建立实体类(VO),这是理所当然的,但是到公司里做项目后,让我认识到,没有说既进行完数据库设计后还要再“自己”建立一变VO.意思是,在项目设计时,要么 ...

  2. js 获取时间比较全,留备用(zhuan)

    var myDate = new Date(); myDate.getYear();        //获取当前年份(2位) myDate.getFullYear();    //获取完整的年份(4位 ...

  3. ruby self.included用法

    ===Module#included 当一个模块混入到类时,如果该模块的included方法已经定义,那么该方法被调用.该方法的唯一参数就是接受混含的类的名字. module M def self.i ...

  4. joomla3.1安装不通过Magic Quotes GPC解决方法

    测试安装下joomla 3.1稳定版,但是不能成功,Magic Quotes GPC始终显示 否红色,这样就安装不了了! 要解决这个很简单,开启Magic Quotes GPC就行了,于是找到php. ...

  5. JS基础回顾,小练习(判断数组,以及函数)

    追梦子博客版权所有. // 判断arr是否为一个数组,返回一个bool值 方法1: function isArray(arr) { var str = arr.__proto__.constructo ...

  6. NGUI 动态添加控件

    本文链接地址: Unity3D NGUI动态创建按钮 本例仅以熟悉NGUI组件功能为目的,想快捷简便的创建按钮或其它游戏物体请参考 “Unity3D 动态实例化Prefab” 以动态创建服务器列表为例 ...

  7. codeforces B. Friends and Presents(二分+容斥)

    题意:从1....v这些数中找到c1个数不能被x整除,c2个数不能被y整除! 并且这c1个数和这c2个数没有相同的!给定c1, c2, x, y, 求最小的v的值! 思路: 二分+容斥,二分找到v的值 ...

  8. 编写高质量JS代码的68个有效方法(三)

    [20141030]编写高质量JS代码的68个有效方法(三) *:first-child { margin-top: 0 !important; } body>*:last-child { ma ...

  9. [OpenCV] Feature Extraction

    特征检测 特征描述 特征匹配 特征跟踪 “不读白不读,读了还想读” 的一本基础书 低层次特征提取 阈值方法 1. 边缘检测 一阶检测算子 二阶检测算子 相位一致性(频域) 2. 角点检测(局部特征提取 ...

  10. windows dos命令窗口的环境变量

    今天安装maven的时候遇到mvn -v显示mvn不是命令行,环境变量maven_home和path路径都配置了. 首先查看windows下的环境变量: >set maven_home MAVE ...