Скройте изображение src в элементе <img>, но покажите его фоновое изображение

У меня есть элемент изображения, к которому я добавил другое фоновое изображение с помощью CSS.

img {
  background-image: url('http://i.stack.imgur.com/5eiS4.png') !important;
}

<img src="http://i.stack.imgur.com/smHPA.png" />

Ответ 1

Я нашел решение, которое работает во всех основных браузерах (протестировано в IE8 +), пытаясь с грубой силой.

img {
  background-image: url('http://i.stack.imgur.com/5eiS4.png') !important;
  position: relative;
  overflow: hidden;
  width: 32px;
  height: 36px;
  padding: 32px 36px 0 0;
  box-sizing: border-box;
}

<img src="http://i.stack.imgur.com/smHPA.png"/>

Ответ 2

Свойство CSS object-position, которое поддерживается как Chrome, так и Firefox, обеспечивает довольно прямое решение этой проблемы. Это свойство используется для смещения позиции рендеринга собственного образа внутри его элемента. В спецификации полезно отметить, что...

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

... до тех пор, пока мы предоставляем смещение, которое гарантирует, что собственное изображение будет полностью вне границ, вместо этого будет отображаться фон. Например:

img {
  object-position: -99999px 99999px;
  background-image: url('http://i.stack.imgur.com/5eiS4.png');
}

<img src="http://i.stack.imgur.com/smHPA.png" />

Ответ 3

Это невозможно в каждом браузере, но в браузерах WebKit и Blink (таких как Safari и Chrome) его можно выполнить, используя свойство content, чтобы заменить содержимое src указанного содержимого <img> элемент. Использование content: none для полного удаления, похоже, не работает, но мы можем заменить его прозрачным GIF для достижения того же эффекта.

Это изменит внутренние размеры изображения (в этом случае будет 1x1), поэтому вам также нужно будет добавить явно width и height, если они еще не были указаны.

img {
  content: url('data:image/gif;base64,R0lGODlhAQABAPAAAAAAAAAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==');
  width: 32px;
  height: 36px;
  background-image: url('http://i.stack.imgur.com/5eiS4.png');
}

<img src="http://i.stack.imgur.com/smHPA.png" />

Ответ 4

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

Ваше изображение здесь

<img src="http://i.stack.imgur.com/smHPA.png" />

пусть его высота составляет 100px, а - 200px

тогда ваша таблица стилей CSS будет выглядеть как таковая

img{
    display: block;
    -moz-box-sizing: border-box;
         box-sizing: border-box;
    width:200px;
    height:100px;
    padding-left:200px;
    background:url('http://i.stack.imgur.com/5eiS4.png') no-repeat;
   }

в основном то, что вам нужно сделать, сначала вставьте свойство border-box, а затем предоставите левое дополнение, равное ширине изображения

Ответ 5

убедитесь, что "content" img имеет тот же размер, что и img, который вы скрываете. Это работает лучше, чем использование фоновых изображений для покрытия изображений переднего плана.

div.image:before {
  position:absolute;
   content:url(http://placehold.it/350x150);
}

кредит этот пост за несколько лет назад fooobar.com/questions/79506/...

Ответ 6

Вы можете сместить изображение и добавить класс к изображению, чтобы придать ему фон.

img {
    position:relative;
    left:-99999px;
}
.background{
    width : 300px;
    height : 300px;
    background-image: url(https://images.pexels.com/photos/255379/pexels-photo-255379.jpeg?auto=compress&cs=tinysrgb&dpr=1&w=500);
    position: relative;
    overflow: hidden;
    left:0;
}

Ответ 7

Не используйте изображения. Используйте div с фоновым изображением

<img> - это тег HTML. CSS должен добавить стиль к нему, а не изменять его атрибуты. Ниже приведено обходное решение. Я бы не рекомендовал его. Не очень чистый подход.

Пример кода:

<!DOCTYPE HTML>
<html>
    <head>
        <meta charset="utf-8">
        <title>Untitled Document</title>
        <style type="text/css">
            .style2{background:url('bg.jpg') 0 0 repeat !important;}
        </style>
    </head>
    <body>
        <div style="background:url(img.png) 0 0; width:728px; height:90px;" class="style2" />
    </body>
</html>

Ответ 8

Вы не можете изменить HTML, но можете заменить изображение! Откройте Photoshop и сделайте 100% прозрачное изображение с тем же именем, что и источник, и поместите его в ту же директорию, где находится текущее изображение.

Что здесь будет? Тег будет занимать пространство, поскольку размер прозрачного изображения и фонового изображения будет видимым:)