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

Question

.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都没有效果，这是为啥呢？

Answer 1

I also encountered this problem. You need to initialize the border attribute of the image. Also, if your image is not inserted, or the path is wrong, it will have that border. You Setting boder:none has no effect (I guess the browser is just for occupying space). Anyway, the pictures I have seen so far have such a situation. Some large websites will also have that border when the pictures are loaded incorrectly. . The image you have here does not have src, and you use the background filling method. The browser defaults to the fact that your img does not have src, so the above one is valid http://bbs.csdn.net/topics/39...
Add src to your img tag, introduce a blank image src="http://www.xcwljy.cn/images/pixel.gif", and then the problem is solved

Answer 2

1. Why doesn’t this picture have a border?

2. border: 0 !important;