css - background-position截取图片后会有个边框去不掉
高洛峰
高洛峰 2017-04-17 14:37:43
0
2
1105
.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都没有效果,这是为啥呢?

高洛峰
高洛峰

拥有18年软件开发和IT教学经验。曾任多家上市公司技术总监、架构师、项目经理、高级软件工程师等职务。 网络人气名人讲师,...

全部回覆(2)
迷茫

我也遇到過著個問題的,你要把圖片設定的boder屬性也要初始化一下.還有補充一點,如果你圖片沒有插入,或者路徑出錯,它是會有那個邊框的,你設定boder:none也是毫無作用的(估計瀏覽器是為了佔位吧),反正目前我所看到的圖片都有這樣一種情況,一些大網站的圖片加載錯誤的時候也是會有那個邊框的。你這裡的圖片沒有src,用的是背景填圖的方式,瀏覽器預設你的img沒有src,這上面的一個方可有效http://bbs.csdn.net/topics/39...
給你的img標籤加上src,引入一個空白圖src="http://www.xcwljy.cn/images/pixel.gif",然後就解決了

迷茫
  1. 為什麼不是這張圖本身有一個border 呢

  2. border: 0 !important;

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板