Как редактировать изображение, полученное с блока img, и вставить только его часть или как убрать рамки у изображения?

Question

Есть ли возможность убрать рамки у изображения, полученного через background-image? Варианты: border: 0; border-style: none; outline: 0; outline-style: none; - не работают.

Есть, конечно, возможность получить изображение, используя атрибут src=".../smile.png", но тогда возникает проблема с получением конкретной части изображения.
Дело в том, что при загрузке изображения через первый вариант, у меня дополнительно устанавливаются координаты конкретной части изображения, а эти настройки CSS не работают, когда получаешь изображение через атрибут src.

Возможно ли передать установленные координаты, используя более корректный метод получения изображения (я имею ввиду через src)?

Первый вариант кода с рамками на выходе:

<span aria-label="?, +1, thumbsup" class="emoji-mart-emoji">
<span style="
   display: inline-block; 
   width: 24px; height: 24px; 
   background-image: url(&quot;https://unpkg.com/[email protected]/img/apple/sheets- 
             256/64.png&quot;); 
   background-size: 5700% 5700%; 
   background-position: 23.2143% 67.8571%;
"></span></span>

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

<img 
  src="https://unpkg.com/[email protected]/img/apple/sheets-256/64.png" 
  style="
    width: 24px; 
    height: 24px; 

    # следующие два параметра являются теми координатам, которые нужно получить в заданном масштабе

    background-size: 5700% 5700%; background-position: 53.5714% 73.2143%;
">

Answer 1

Оформите код как положено в виде сниппета, чтобы выполнялся.
Вот я воспроизвел кусок вашего кода. Там все нормально, не вижу никаких бордеров. И их не должно быть, если не задавать специально.

Сформулируйте вашу задачу точнее, приведите полный код и покажите скриншот.

.inner {
display: inline-block; 
   width: 24px; height: 24px; 
   background-image: url('https://unpkg.com/[email protected]/img/apple/sheets-256/64.png'); 
   background-size: 5700% 5700%; 
   background-position: 23.2143% 67.8571%;
}

<span aria-label="" class="emoji-mart-emoji">
<span class="inner"></span></span>

Answer 2

Что я имею ввиду под границами при передаваемом изображении через style="background-image: url(../smile.png)", которые нужно убрать.

<img style="display: inline-block; width: 24px; height: 24px; background-image: url(&quot;https://unpkg.com/[email protected]/img/apple/sheets-256/64.png&quot;); background-size: 5700% 5700%; background-position: 23.2143% 67.8571%;">

БЛОГ НА HUSL

Как редактировать изображение, полученное с блока img, и вставить только его часть или как убрать рамки у изображения?

Ответы (2 шт):