Как убрать серую рамку, которая окружает фоновые изображения?

Я столкнулся с интересной проблемой в следующей строке кода:

  <img style="background-image:url(Resources/bar.png); width: 300px; height: 50px;"/>

В Safari (по крайней мере) серая граница окружает область размером 300x50 пикселей. Добавление стиля = & quot; граница: нет; & quot; не удаляет его. Есть идеи?

Благодарю. Майк

 Michael Swarts02 июл. 2009 г., 09:51
Не работает. Граница не появляется, если я заменяю тег img тегом div & # x2026; Это то, как это должно быть сделано?
 Elzo Valugi02 июл. 2009 г., 09:47
Попробуйте & quot; border: 0; & quot;
 Elzo Valugi02 июл. 2009 г., 09:51
Вы динамически изменяете CSS страницы, используя JavaScript?
 neaumusic15 июл. 2015 г., 05:11
из трюков css, 1x1 base 64 прозрачный imgsrc="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"
 Elzo Valugi02 июл. 2009 г., 09:56
Напстер прав. вы делаете это не правильно. background - это свойство css для изображений. посмотрите на мой пример для правильных параметров изображения

Ответы на вопрос(12)

background: url(Resources/bar.png) no-repeat;
 Michael Swarts02 июл. 2009 г., 09:56
Не работает. Похоже, вы не можете использовать тег изображения.

а не в других браузерах, попробуйте перезагрузить браузер CSS, используя что-то вродеYUI CSS RESET

Правильным способом было бы отделить CSS от кода и создать класс CSS для изображения.

<img src='whatever.png' alt='whatever' class='className' />

и в CSS, чтобы определить, как выглядит className. , className {border: 0;}

 Michael Swarts02 июл. 2009 г., 09:53
Не проверял другие браузеры, но я думаю, что мне просто нужно использовать тег div. Это исправлено, но я подумал, что тег img - это то, как это нужно сделать & # x2026;

он работал для меня (на Chrome и Safari). Это была не граница, а тень, поэтому добавьте эту строку в тег:

{-webkit-box-shadow:none;}

Надеюсь, это работает и для вас.

РЕДАКТИРОВАТЬ: Да, вы должны иметь фоновые изображения в CSS другого класса. Выполнение этого в тегах div или body (в зависимости от того, что вы пытаетесь сделать) будет работать. Это также останавливает фоновое изображение как элемент сам по себе, который может испортить поток элементов на странице и испортить ваше позиционирование.

<div class="myDivClass">content to go on TOP of the background image</div>

CSS:

.myDiVClass
{
background: url(Resources/bar.png)  no-repeat;
width: 300px; 
height: 50px;
}

или же

 <div class="myDivClass" style="background: url(Resources/bar.png)  no-repeat; width: 300px; height: 50px;">content to go on TOP of the background image</div>

Лучше всего поддерживать CSS отдельно, так как в противном случае это противоречит части вопроса.

 Michael Swarts02 июл. 2009 г., 09:48
Да. Не работает. Это похоже на границу, но, похоже, действует как-то еще.

img {
 content: "";
}
 22 дек. 2014 г., 07:58
Ваши комбинированные ответы - это решение для Chrome. Тем не менее, в FF есть не только граница, но и значок разбитого изображения. Совместимость .... :-(
 16 апр. 2014 г., 18:10
Это делает трюк (наряду сdisplay: inline-block сохранить размеры), но оно сохраняет пустое изображение, даже если исходное изображение не повреждено ...
 02 апр. 2016 г., 02:05
При выборе 59 граница все еще отображается с обоими, но данные src = ': image / png; base64, R0lGODlhFAAUAIAAAP /// wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI + py + 0Po5y02ouz3rz7rxUAOw== взломать все еще исправляет.

например.,

<img src="Resources/bar.png" alt="bar" width="300" height="50" />

Но img только для встроенных (переднего плана) изображений. Если вы действительно хотите, чтобы изображение было фоном чего-то, вам нужно применить стиль к фактическому элементу, фоном которого вы хотите, чтобы он был:

<div style="background-image:url(Resources/bar.png);">...</div>
Решение Вопроса

у вас есть элемент img, который не имеет атрибута src, но к нему применен стиль фонового изображения.

Я бы сказал, что серая граница является «заполнителем». где было бы изображение, если бы вы указали атрибут src.

Если вы не хотите "переднего плана" image, тогда не используйте тег img - вы уже заявили, что переход на div решает проблему, почему бы не пойти с этим решением?

 15 мар. 2016 г., 18:48
Это решило проблему серой границы!
 08 окт. 2014 г., 21:00
Печально, что CSS3 заставляет пользователя иметь эту уродливую границу по умолчанию. Вот почему я стараюсь избегать использования ужасных готовых тегов, таких как «ag; img».
 02 июл. 2009 г., 19:21
Рад, что могу помочь - есть ли шанс, что вы пометите мой ответ как принятый?
 Michael Swarts02 июл. 2009 г., 09:58
Правильный. Я думаю, что это именно так. Я исправил это используя div. Я не осознавал, что тег img предназначен только для изображений на переднем плане. Но да, это ответ, насколько я могу судить.
 10 июл. 2017 г., 16:20
HTML должен быть описательным, и если вы хотите управлять своими изображениями с помощью CSS, вы не должны менять свой HTML ...

чное изображение, которое решает проблему атрибута src, сохраняя контроль над изображением:

content:url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7')

Мой общий подход состоит в том, чтобы определить следующее в моем файле reset.css, а затем использовать класс для предоставления фактического изображения и управления им. Это ведет себя как IMG, но полностью контролируется CSS.

img {
  display: -moz-inline-box;
  -moz-box-orient: vertical;
  display: inline-block;
  *display: inline;
  vertical-align: middle;
  *
  vertical-align: auto;
  font: 0/0 serif;
  text-shadow: none;
  color: transparent;
  background-size: contain;
  background-position: 50% 50%;
  background-repeat: no-repeat;
  box-sizing: border-box;
}

img:not([src]) {
    content:             url('data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7');
}

.myuniqueimage {
    background-image: url('../images/foobar.png');
    height: 240px;
}

Спасибо + program_historian и + binnyb за данные: совет по изображению

В том случае, если вашResources/bar.png является изображением переднего плана в виде спрайта, имеет смысл использоватьimg тег, а неdiv, Когда вы делаете это, это может помочь иметь прозрачный файл изображения размером 1 пиксель, который вы используете дляsrc атрибут, затем установите фоновое изображение, как вы делаете здесь, например.

    <img src="transparent.png" style="background: url(sprite.png) x y" />

Здесь вы установитеx а такжеy быть позицией пикселя на спрайте, с которого вы хотите, чтобы изображение начиналось. Эта техника также объясняется в:http://www.w3schools.com/css/css_image_sprites.asp

Конечно, недостатком этого является то, что существует дополнительный запрос, но если вы всегда используете одно и то же прозрачное изображение для ваших спрайтов, это не является большой сделкой.

 11 авг. 2015 г., 06:03
этот вид работал для меня, transparent.png, background-image, установить высоту и ширину, чтобы изображение обрезалось (это было моей потребностью), и тень уходила

когда у моего исходного HTML был тег IMAGE без источника. Мой Javascript определил, какое изображение показывать. Однако перед загрузкой изображения пользователь увидел поле заполнителя.

<img id="myImage">

Мое исправление состояло в том, чтобы обновить исходный тег изображения CSS до

#myImage {
  display:none;
}

А затем использовал JQuery, чтобы показать его после загрузки его содержимого.

$('#myImage')
.attr('src', "/img/" + dynamicImage + '.png')
.fadeTo(500, 1);

img.src='data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw=='

Это должно сработать!

 21 июл. 2016 г., 11:00
работал на меня, спасибо! предложение gif @binnyb не сработало.
 22 сент. 2014 г., 22:44
Или еще меньшее изображение (GIF вместо PNG):<img src="data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7">

<img border="0" />

Это должно делать свое дело.

РЕДАКТИРОВАТЬ

Извините, я вижу, что вы делаете что-то очень неправильно ... вы устанавливаете фоновое изображение для тега img ... это не имеет смысла ...

вместо изображения тега используйте

<div style="background-image: url(Resources/bar.png);"></div>

или если это изображение, которое вы хотите в этой области, используйте

<img src="Resources/bar.png" border="0" Width="500px" Height="300" />

Ваш ответ на вопрос