Убрать рамку у image

@Nyiann · Регистрация: 18.10.2014

Студворк — интернет-сервис помощи студентам

Здравствуйте!

пмогите решить проблему с рамкой у тега

HTML5
1
<img>

суть проблемы:

имеются 10 изображений иконок соц сетей в формате *.png

5 цветных и 5 черно-белых

для добавления на сайт я написал вот такой кусок кода:

HTML5
1
2
3
4
5
6
7
<div class="social">
                <img class="soc1">
                <img class="soc2">
                <img class="soc3">
                <img class="soc4">
                <img class="soc5">
</div>

css стиль для всех один и тот же, только меняется задняя картинка (background) и все

сам стиль

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
*{
    border: none;
    box-shadow: none;
    text-decoration: none;
}
 
img.soc1{
    background: url(../images/social/instagram4.png);
    width: 40px;
    background-size: cover;
    height: 40px;
    border: none;
    box-shadow: none; 
    opacity: 0.5;
}
 
img.soc1:hover{
    background: url(../images/social/instagram5.png);   
    opacity: 0.9;
}

за рамку (обводку) отвечает свойство border

собственно я его отключил и отключил text-decoration и outline на всякий случай

в итоге рамка все = остается....

скрин прикреплен, если нужен link на сайт напишите залью или исходники

пользуюсь браузером google chrome

@mrBobrillo · 25.11.2015, 22:01

Выкладывайте ссылку, потому что у меня ни в фоксе ни в хроме нет никакого бордера http://jsfiddle.net/b1cg2vnv/280/

@Nyiann · 26.11.2015, 01:25 **[ТС]**

Сообщение от mrBobrillo

Выкладывайте ссылку, потому что у меня ни в фоксе ни в хроме нет никакого бордера http://jsfiddle.net/b1cg2vnv/280/

http://nyiann.xyz/

@mrBobrillo · 26.11.2015, 01:34

Никаких рамок не наблюдаю, ни в фоксе ни в хроме

@Nyiann · 26.11.2015, 01:37 **[ТС]**

Сообщение от mrBobrillo

Никаких рамок не наблюдаю, ни в фоксе ни в хроме

посмотрите, пожалуйста, еще раз, у меня они имеются

@Seft · 26.11.2015, 09:38

Nyiann, Скиньте архив сайта весь

@mrBobrillo · 26.11.2015, 10:07

Ясно все, кто же так делает то?

Смотрите, вы ведь используете тег img с классами, которые дают какие то правила. Ну как бы это не совсем нормальная методика, ведь если вы используете тег img, то используйте src в нем и будет вам счастье. В данной ситуации вы могли бы вместо img использовать спаны с такими же классами, и никаких бордеров не возникло бы по идее. Прикрепляю скрин, на нем я показываю что происходит:
1. Первая картинка это спан к которому я применил ширину, высоту, дисплей инлайн блок и бг картинки, как видите все нормально.
2. Вторая картинка после спана имеет src самой картинки.

@Nyiann · 26.11.2015, 16:13 **[ТС]**

Сообщение от mrBobrillo

Ясно все, кто же так делает то?

Да я вчера так попробовал (: убралось , я просто с div работаю больше времени и img толком не использую (:

Я сделал по другому, не захотел париться написал на js теперь все работает (:
И да я забыл про src :c В js как раз таки он и меняется (:

Спасибо что помогли (:

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Web (WebAssembly): Загрузка PNG с прозрачным фоном с помощью SDL3_image 8Observer8 10.02.2026 Содержание блога Библиотека SDL3_image содержит инструменты для расширенной работы с изображениями. Пошагово создадим проект для загрузки изображения формата PNG с альфа-каналом (с прозрачным. . .	Установка Qt-версии Lazarus IDE в Debian Trixie Xfce volvo 10.02.2026 В общем, достали меня глюки IDE Лазаруса, собранной с использованием набора виджетов Gtk2 (конкретно: если набирать текст в редакторе и вызвать подсказку через Ctrl+Space, то после закрытия окошка. . .	SDL3 для Web (WebAssembly): Работа со звуком через SDL3_mixer 8Observer8 08.02.2026 Содержание блога Пошагово создадим проект для загрузки звукового файла и воспроизведения звука с помощью библиотеки SDL3_mixer. Звук будет воспроизводиться по клику мышки по холсту на Desktop и по. . .	SDL3 для Web (WebAssembly): Основы отладки веб-приложений на SDL3 по USB и Wi-Fi, запущенных в браузере мобильных устройств 8Observer8 07.02.2026 Содержание блога Браузер Chrome имеет средства для отладки мобильных веб-приложений по USB. В этой пошаговой инструкции ограничимся работой с консолью. Вывод в консоль - это часть процесса. . .
SDL3 для Web (WebAssembly): Обработчик клика мыши в браузере ПК и касания экрана в браузере на мобильном устройстве 8Observer8 02.02.2026 Содержание блога Для начала пошагово создадим рабочий пример для подготовки к экспериментам в браузере ПК и в браузере мобильного устройства. Потом напишем обработчик клика мыши и обработчик. . .	Философия технологии iceja 01.02.2026 На мой взгляд у человека в технических проектах остается роль генерального директора. Все остальное нейронки делают уже лучше человека. Они не могут нести предпринимательские риски, не могут. . .	SDL3 для Web (WebAssembly): Вывод текста со шрифтом TTF с помощью SDL3_ttf 8Observer8 01.02.2026 Содержание блога В этой пошаговой инструкции создадим с нуля веб-приложение, которое выводит текст в окне браузера. Запустим на Android на локальном сервере. Загрузим Release на бесплатный. . .	SDL3 для Web (WebAssembly): Сборка C/C++ проекта из консоли 8Observer8 30.01.2026 Содержание блога Если вы откроете примеры для начинающих на официальном репозитории SDL3 в папке: examples, то вы увидите, что все примеры используют следующие четыре обязательные функции, а. . .

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	25.11.2015, 22:01
	Выкладывайте ссылку, потому что у меня ни в фоксе ни в хроме нет никакого бордера http://jsfiddle.net/b1cg2vnv/280/ 0

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	26.11.2015, 01:34
	Никаких рамок не наблюдаю, ни в фоксе ни в хроме Миниатюры 0

@Seft 4 / 4 / 4 Регистрация: 14.11.2015 Сообщений: 24
	26.11.2015, 09:38
	Nyiann, Скиньте архив сайта весь 0

@mrBobrillo 49 / 42 / 25 Регистрация: 18.11.2015 Сообщений: 279
	26.11.2015, 10:07
	Сообщение было отмечено Nyiann как решение Решение Ясно все, кто же так делает то? Смотрите, вы ведь используете тег img с классами, которые дают какие то правила. Ну как бы это не совсем нормальная методика, ведь если вы используете тег img, то используйте src в нем и будет вам счастье. В данной ситуации вы могли бы вместо img использовать спаны с такими же классами, и никаких бордеров не возникло бы по идее. Прикрепляю скрин, на нем я показываю что происходит: 1. Первая картинка это спан к которому я применил ширину, высоту, дисплей инлайн блок и бг картинки, как видите все нормально. 2. Вторая картинка после спана имеет src самой картинки. Миниатюры 1

Убрать рамку у image

Решение