HTML/CSS удалить границу (или контур) из изображения, загруженного в SPAN с помощью CSS

Question

Мне нужно удалить границы / контур (я не знаю, что именно) из изображения, загруженного в Span с помощью CSS.

Это HTML-код:

<div> <span class="BG"><img class="EU"></span> </div>

И это CSS:

.BG{
     background-color: #017b5b!important;  
     display:block;
}

.EU{
        background-image: url('http://bet.dn1.it/images/broker.png');
        background-position: -190px -362px;
        width: 189px;
        height: 50px;                
        display:block;
        margin:0 auto;

}

Вы можете найти пример здесь: JsFiddle

Большое спасибо за поддержку.

Чао

Answer 1

Поскольку вы используете background-image, измените элемент html. Вы можете использовать промежуток, например.

JSFIDDLE

https://jsfiddle.net/3vwjc26t/

<div>
<span class="BG"><span class="EU"></span></span>
                </div>

Answer 2

Вам не нужен тег img для этого. Просто используйте div.

<div>
  <span class="BG"><div class="EU"></div></span>
</div>

Answer 3

Это потому, что вы используете <img> элемент без src атрибут, так как вы используете CSS, чтобы добавить его как background-image Вы должны переключиться на другой тип элемента, как <span> или же <div>,

Вот так:

<div>
     <span class="BG"><span class="EU"></span></span>
</div>

Отредактированная скрипка

Answer 4

Итак, есть две вещи, которые вы можете сделать.
1. Если вы должны использовать <img> При помощи тега вы можете создать прозрачное изображение blank.gif (1px x 1px) и установить для источника значение blank.gif <img src="blank.gif" class="EU">
2. Как и все остальные, вы можете просто изменить свой <img> тег к <span> или же <div>

Поведение по умолчанию <img> тег, который не ссылается на изображение или действительное изображение, должен установить границу вокруг него. Кажется, нет способа удалить эту границу.