img 灰色默認外邊框的去除

時間 2019-12-14

標籤 img 灰色默認邊框去除欄目 HTML 简体版

原文原文鏈接

最近在作一個小遊戲時發現了一個問題，老是在彈出img時先出現一個灰色的邊框，因此爲了查找問題，查找了一些關於img 默認邊框的小知識點。css

在這裏整理了一些知識點：html

一. 下面代碼都試驗事後會發現，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>

爲了解決這個問題，整理了幾個方法：spa

1. 設置空img的css樣式.net

img[src=""],img:not([src]){
            opacity:0;
        }

第一個爲屬性選擇器（img中src爲空的元素），第二個爲反選僞類選擇器（src沒有的img元素），將其的opacity設置爲空code

2.img剪裁方法htm

（1）負marginblog

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

-------------------

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。