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; }