css - background-position截取图片后会有个边框去不掉

问题描述

问 题

.srcImg
        {
            position: absolute;
            background: url(/Users/ShareAnimation/Desktop/23456.png);
            background-repeat: no-repeat;/*设置及是否重复原图，比如repeat-x表示在水平方向重复*/
            width: 22px;
            height: 22px;/*根据定位的位置，然后选取一个width，height的矩形*/
            left: 10px;
            top: 10px;
            cursor: pointer; /*光标类型，这里为小手*/    
            outline: none;    /*变宽样式，none表示无边框*/
            z-index: 1000;    /*元素堆叠顺序*/
            background-position: -27px -200px;    /*定位图像某一位置*/
        }

<img  class="srcImg">

我的样式代码是这样的，截取后的效果图如下：

这个边框我设置border:none，outline:none都没有效果，这是为啥呢？

解决方案

我也遇到过着个问题的，你要把图片设置的boder属性也要初始化一下.还有补充一点，如果你图片没有插入，或者路径出错，它是会有那个边框的，你设置boder:none也是毫无作用的（估计浏览器是为了占位吧），反正目前我所看到的图片都有这样一种情况，一些大网站的图片加载错误的时候也是会有那个边框的。你这里的图片没有src，用的是背景填图的方式，浏览器默认为你的img没有src，这上面的一个方可有效http://bbs.csdn.net/topics/39...
给你的img标签加上src,引入一个空白图src="http://www.xcwljy.cn/images/pixel.gif"，然后就解决了

这篇关于css - background-position截取图片后会有个边框去不掉的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！