img 灰色預設外邊框的去除
阿新 • • 發佈：2019-02-17
最近在做一個小遊戲時發現了一個問題，總是在彈出img時先出現一個灰色的邊框，所以為了查詢問題，查找了一些關於img 預設邊框的小知識點。
在這裡整理了一些知識點：
一. 下面程式碼都試驗過後會發現，img會有外邊框，這個也是使用img元素的一個坑
一般在img為空時出現，因為瀏覽器找不到圖，就會用一個邊框來代替
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>img外邊框</title> </head> <body> <p class="container-img"> <img class="common-icon login-icon" src=""> </p> </body> <style type="text/css"> .container-img { display: inline-block; width: 36px; height: 36px; overflow: hidden; } .common-icon { display: inline-block; width: 36px; height: 36px; } </style>
為了解決這個問題，整理了幾個方法：
1. 設定空img的css樣式
img[src=""],img:not([src]){
opacity:0;
}第一個為屬性選擇器（img中src為空的元素），第二個為反選偽類選擇器（src沒有的img元素），將其的opacity設定為空
2.img剪裁方法
（1）負margin
.container-img img { display: inline-block; margin: -1px; width: 38px; height: 38px; }
負的邊距像能減小元素在文件流中的尺寸一樣，但其實它的尺寸大小並沒變，只是文件流在計算元素位置的時候，會認為負邊距把元素的尺寸減小了，所以位置也就發生變化了。還有，文件流只能是後面的流向前面的，即文件流只能向左或向上流動，不能向下或向右移動。所以margin = -1px相當於向左上方移動一個畫素，所以margin = -1px相當於向左上方移動一個畫素，為了讓父級元素可以遮住img的邊框，需要將img width/height 均加2px，相當與對圖片進行剪裁，定位元素方法與這個原理一樣。
負margin的使用場景很多，我們很多用的三欄佈局的聖盃佈局，雙飛翼佈局都是這麼使用的。
（2）絕對定位
.container-img{ position:relative; } .container-img img { position: absolute; top: -1px; right: -1px; width: 38px; height: 38px; }