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

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

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

Мой 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

Ответы

Ответ 1

Попробуйте следующее:

img{border:0;}

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

.myClass img{border:0;}

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

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

Ответ 2

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

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

Ответ 3

img need 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">

Ответ 4

неплохо использовать CSS reset. добавьте это в начало вашего файла CSS

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

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

Ответ 5

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

Однако добавление позиции: absolute; top: 0; left: 0; исправлена ​​проблема.

Исходный пост выше имеет положение: абсолютное; но не имеет вершины: 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;">

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

Ответ 6

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

Ответ 7

Какой класс у вас есть в теге изображения?

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

<img src="/images/myimage.jpg" style="border:none;" alt="my image" />

Ответ 8

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

Ответ 9

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

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

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

.clearBorder{border:none;}

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

Ответ 10

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

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

Ответ 11

Я считаю, что вам нужно добавить границу: ни один стиль к вашему элементу значка.

Ответ 12

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

img {
   border: none;
}