Как убрать границу вокруг изображения в CSS?

Question

Я пытаюсь отобразить диапазон, когда курсор мыши находится на значке справки.

Это работает, но, тем не менее, мне не удается убрать границу вокруг иконки.

Мой CSS:

.info{
    position:absolute;
    border:none;
}

a.info{
    position:absolute; 
    z-index:24; 
    background:none;
    color:#000;
    text-decoration:none
}

a.info:hover{
    z-index:25; 
    background-color:#FFF;
    cursor:help;
}

a.info span{
    display: none
}

a.info:hover span{ 
    display:block; 
    position:absolute;
    cursor:help;
    bottom:0px; 
    left:26px; 
    width:150px;
    padding:4px;
}

CD

Answer 1

Попробуйте это:

img{border:0;}

Вы также можете ограничить область действия и удалить границы только для некоторых изображений, выполнив следующие действия:

.myClass img{border:0;}

Более подробную информацию о свойстве border css можно найти здесь .

Редактировать: изменена граница с 0px на 0. Как поясняется в комментариях, px является избыточным для единицы 0.

Answer 2

Другое дело - помните, что если у вас есть атрибут с empty src, то ни одно из этих предложений не будет работать, граница будет по-прежнему отображаться.

<img src="" style="width:30px;height:30px;">

Answer 3

img нужен src, чтобы использовать границу для удаления, я не знаю, почему css сумасшедший

data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAABAAEAAAgEAP8FBAA7

Итак, попробуйте пример с SRC:

img.logo {
	width: 200px;
    height: 50px;
	background: url(http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg) no-repeat top left;
}

<img class="logo" src="data:image/gif;base64,R0lGODlhAQABAPcAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAACH5BAEAAP8ALAAAAAABAAEAAAgEAP8FBAA7">

Итак, попробуйте пример без SRC:

img.logo {
	width: 200px;
    height: 50px;
	background: url(http://cdn.sstatic.net/Sites/stackoverflow/img/sprites.svg) no-repeat top left;
}

<img class="logo">

LOL ... CSS сумасшедший! хорошо повеселиться

Answer 4

это хорошая идея использовать CSS для сброса. добавьте это вверху вашего CSS-файла

img, a {border:none, outline: none;}

надеюсь, это поможет

Answer 5

<img id="instapic01" class="samples" src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"/>

Answer 6

Я понимаю, что это очень старая запись, но я столкнулся с подобной проблемой, в которой мое отображаемое изображение всегда имело рамку вокруг него. Я пытался заполнить окно браузера одним изображением. Добавление стилей, как границы: нет; не удаляли границу и не делали поля: 0; или отступ: 0; или любую комбинацию из трех.

Однако добавляемая позиция: абсолютная; верхняя: 0; левая: 0; исправил проблему.

Оригинальный пост выше имеет позицию: абсолютный; но не имеет top: 0; left: 0; и это добавляло рамку по умолчанию на моей странице.

Чтобы проиллюстрировать решение, оно имеет белую рамку (точнее, смещение сверху и слева):

<img src="filename.jpg"
style="width:100%;height:100%;position:absolute;">

Это не имеет границы:

<img src="filename.jpg"
style="width:100%;height:100%;position:absolute;top:0;left:0;">

Надеюсь, это поможет кому-то найти этот пост и попытаться решить подобную проблему.

Answer 7

Вот как я избавился от своего:

.main .row .thumbnail {
    display: inline-block;
    border: 0px;
    background-color: transparent;
}

Answer 8

Спасибо за ответы,

Граница удалена для Internet Explorer, но это есть для Firefox.

Итак, я добавил этот класс в img:

.clearBorder{border:none;}

И это сработало!

Answer 9

Я обычно использую это в верхней части файла CSS.

img {
   border: none;
}

Answer 10

возможно добавьте border:none к a.info:hover span или text-decoration:none