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

Ответ 1

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

Я бы сказал, что серая граница - это "placeholder" для того, где будет изображение, если бы вы указали атрибут src.

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

Ответ 2

Вы также можете добавить пустое изображение в качестве владельца места:

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

Это должно сделать трюк!

Ответ 3

Собственно, это работает, по крайней мере, в Chrome:

img {
 content: "";
}

Ответ 4

Следующее будет использовать css для установки src на крошечное прозрачное изображение, которое решает проблему атрибута 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 для данных: кончик изображения

Ответ 5

попробуйте <img border="0" />

Это должно сделать трюк.

ИЗМЕНИТЬ

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

вместо imagetag используйте

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

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

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

Ответ 6

img нуждаются в атрибуте src.

например.

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

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

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

Ответ 7

Пробовал установить границу на 0px?

EDIT: Да, у вас есть фоновые изображения в css другого класса. Выполнение этого в div или в теге тела (в зависимости от того, что вы пытаетесь сделать) будет работать. Он также останавливает фоновое изображение как элемент сам по себе, который закручивает поток элементов на странице и помешает вашему размещению.

<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 отдельно, поскольку в противном случае он побеждает часть точки.

Ответ 8

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

<img id="myImage">

Мое исправление заключалось в обновлении исходного тега CSS CSS до

#myImage {
  display:none;
}

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

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

Ответ 9

Попробуйте установить это вместо фонового изображения:

background: url(Resources/bar.png) no-repeat;

Ответ 10

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

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

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

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

Ответ 11

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

{-webkit-box-shadow:none;}

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

Ответ 12

Я знаю, что это старый вопрос, но я нашел это полезным.

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

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

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

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

Ответ 13

добавьте пустой src= "" к своему компоненту изображения, если использование в качестве фонового изображения в css квадрате исчезнет

<image class=${styles.moneyIcon} src="" ></image>