Я столкнулся с интересной проблемой в следующей строке кода:
<img style="background-image:url(Resources/bar.png); width: 300px; height: 50px;"/>
В Safari (по крайней мере) серая граница окружает область 300x50 пикселей. Добавление стиля = "border: none;" не удаляет его. Любые идеи?
Спасибо. Mike
Итак, у вас есть элемент img, у которого нет атрибута src, но он имеет стиль фонового изображения.
Я бы сказал, что серая граница - это "placeholder" для того, где будет изображение, если бы вы указали атрибут src.
Если вам не нужен образ "переднего плана", то не используйте тег img - вы уже заявили, что переход на div разрешает проблему, почему бы не пойти с этим решением?
Вы также можете добавить пустое изображение в качестве владельца места:
img.src='data:image/png;base64,R0lGODlhFAAUAIAAAP///wAAACH5BAEAAAAALAAAAAAUABQAAAIRhI+py+0Po5y02ouz3rz7rxUAOw=='
Это должно сделать трюк!
Собственно, это работает, по крайней мере, в Chrome:
img {
content: "";
}
Следующее будет использовать 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 для данных: кончик изображения
попробуйте <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" />
img нуждаются в атрибуте src.
например.
<img src="Resources/bar.png" alt="bar" width="300" height="50" />
Но img предназначен только для встроенных (передних) изображений. Если вы действительно хотите, чтобы изображение было фоном чего-то, вам нужно применить стиль к фактическому элементу, в котором вы хотите, чтобы он был фоном:
<div style="background-image:url(Resources/bar.png);">...</div>
Пробовал установить границу на 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 отдельно, поскольку в противном случае он побеждает часть точки.
У меня была аналогичная проблема, когда у моего исходного HTML был тег IMAGE без источника. Мой Javascript определил, какой образ показывать. Однако перед загрузкой изображения пользователь увидел блок-заполнитель.
<img id="myImage">
Мое исправление заключалось в обновлении исходного тега CSS CSS до
#myImage {
display:none;
}
И затем использовал JQuery, чтобы показать его после загрузки содержимого.
$('#myImage')
.attr('src', "/img/" + dynamicImage + '.png')
.fadeTo(500, 1);
Попробуйте установить это вместо фонового изображения:
background: url(Resources/bar.png) no-repeat;
Если это происходит только в Safari, а не в других браузерах, попробуйте reset браузер CSS, используя что-то вроде YUI CSS RESET
Правильным способом было бы отделить css от кода и получить класс CSS для изображения.
<img src='whatever.png' alt='whatever' class='className' />
и в css, чтобы определить, как выглядит className. , className {border: 0;}
Попробуйте это, это сработало для меня (на хроме и Safari). Это не граница, а тень, поэтому, пожалуйста, добавьте эту строку в тег:
{-webkit-box-shadow:none;}
Надеюсь, что это сработает и для вас.
Я знаю, что это старый вопрос, но я нашел это полезным.
В случае, если ваш 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
Конечно, недостатком этого является то, что есть дополнительный запрос, но вы всегда используете один и тот же прозрачный образ, чтобы вы справлялись с этим неважно.
добавьте пустой src= "" к своему компоненту изображения, если использование в качестве фонового изображения в css квадрате исчезнет
<image class=${styles.moneyIcon} src="" ></image>