Блог

Главная - Вопросы по программированию - как удалить белую рамку с помощью тега img

как удалить белую рамку с помощью тега img

#html #image #css

#HTML #изображение #css

Вопрос:

Я не могу найти решение для этого.

Проблема

Как удалить эту белую рамку вокруг треугольника?

Код: 

 .triangle{
    background: url('/img/triangle.png');
    background-size: cover;
    width: 15px;
    height: 15px;
    margin:0px;
    padding:0px;
    border: none;
}

<img class="triangle" />

Комментарии:

1. если она встроена в изображение, вы не можете … по крайней мере, не CSS … возможно, с помощью Adobe Photoshop

2. его нет на изображении. здесь изначально она без фона

3. Вам придется опубликовать больше кода (желательно всего) … не могу сказать, как вы получили треугольник на этом изображении.

4. Я не видел никакой белой рамки на этом изображении, перейдите по этой ссылке, возможно, это может вам помочь jsfiddle.net/sqg0yt5z/13 .

Ответ №1:

Ваша разметка недопустима. Белая рамка берется из визуализации изображения, не найденного в вашем браузере. Чтобы исправить разметку, либо задайте src атрибут самому изображению (это обязательно, см. MDN):

 <img src="/img/triangle.png" />

или замените его div с заданным свойством background, например:

 .triangle {
  background: url('https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Black_triangle.svg/2000px-Black_triangle.svg.png');
  background-size: cover;
  width: 15px;
  height: 15px;
  margin: 0px;
  padding: 0px;
  border: none;
}  
 <div class="triangle"></div>

Ответ №2:

Если вы собираетесь использовать тег img для этой задачи, выполните

 <img class="triangle" src="https://upload.wikimedia.org/wikipedia/commons/thumb/3/3c/Black_triangle.svg/2000px-Black_triangle.svg.png" />

это должно решить вашу проблему… В противном случае сделайте именно то, что сделали, но превратите этот тег img в div.

Ответ №3:

Я бы также заглянул в свойства «outline» и «outline-color», чтобы либо оформить ее, либо заставить исчезнуть.

Вот дополнительная информация:
http://www.w3schools.com/cssref/pr_outline-color.asp
http://www.w3schools.com/cssref/pr_outline.asp