Заменить HTML IMG на CSS IMG?

Question

Я переделываю сайт, но у меня есть только разрешение на изменение CSS.Большинство элементов, которые мне нужно изменить, правильно помечены как идентификаторы или классы, но в нескольких местах идентификаторы или классы перечислены внутри тега img.

Я хочу заменить это изображение в теге img, используя только css.Есть ли способ сделать это?то есть скрыть src img и видеть только мое ссылочное изображение css?

Answer 1

извините за такой поздний пост, (почти год, я знаю ..), но у меня была точно такая же проблема Dreamling , Некоторые из html, используемых на нашем сайте, вызываются извне, поэтому редактирование html также не было для меня возможным. Вот как я решил проблему ... Используя только CSS.

Используйте Firebug, если он у вас есть. Теперь найдите изображение, которое вы хотите заменить в HTML. (firebug покажет идентификаторы и классы элементов)

Ваш HTML должен выглядеть примерно так, чтобы он работал. (с элементом img src внутри элемента span)

    <span class="Dreamlings_ClassA Dreamlings_ClassB">
    <img src="http://www.dreamlingsSite.com/dreamlingspic.png" alt="Dreamling's Pic">
    <span>[This is just an extra span!] </span>
    </span>

Теперь для CSS:)

Вызовите первый элемент по классу в CSS. (используйте более позднее имя последнего класса при редактировании [если у вас есть несколько элементов span с одним и тем же именем первого класса])

    <span class="Dreamlings_ClassB">

должно выглядеть примерно так ..

span.Dreamlings_ClassB {
    background-image: url('../dreamlingsnewpic.png') !important; 
}

и скрыть это надоедливое изображение в элементе img src ..

span.Dreamlings_ClassA img {
    display: none !important;
}

И это все! :)

p.s. Я использовал! Важные теги в моем CSS, чтобы перезаписать другие внешние таблицы стилей .. но вам не нужно использовать теги, если ваш CSS будет работать без них. (вам просто нужно быть более конкретным в css с идентификаторами и классами)

Надеюсь, это помогло!

-tony

Answer 2

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

<style>

#container {
   background: url('image.png') no-repeat;
   text-indent: -9999;
}

</style>
<div id="container">
    <img src="image.png" alt="image to be replaced" />
</div>

Как говорили другие, это действительно не очень хорошая практика, но она работает. Проверено только в Chrome.

Answer 3

Ограничение доступа к HTML, но предоставление доступа к редактированию CSS - странная практика. Оба элемента идут рука об руку, чтобы создать страницу.

В любом случае, вы можете попробовать удалить или изменить имя «btn_next.png», чтобы оно не отображалось при вызове из «src» и сделать CSS следующим:

#btn_next {
   background: url('image.png') no-repeat;
   display:block;
   width:150px; /* for example */
   height:30px; /* for example */
}

Если это не сработает, единственным другим способом будет скрыть кнопку ввода и заменить строку li фоновым изображением, но тогда кнопка перестанет работать. Если у вас нет доступа к уже включенному файлу javascript, вы можете посмотреть на другие решения.

Answer 4

Я хочу заменить это изображение в теге img, используя только css.

Не знаю, нет.Атрибут src изображения нельзя изменить из CSS.

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

Вы должны будете изменить оригинальный HTML таким образомпоэтому исходная кнопка является элементом <button> со свойством background-image - , которое можно переопределить с помощью CSS.