Заменить расположение изображения src с помощью CSS

У меня есть сайт с изображением с атрибутом src, и я хотел бы изменить местоположение src этого изображения с собственным изображением. Изображение находится в div-компоненте. Я не могу изменить HTML и искать способы изменить его с помощью CSS только, пожалуйста. КомпонентЗаменить расположение изображения src с помощью CSS

Div:

<div class="application-title"> 
<img style="margin-top: 3px;height: 45px;" src="image.svgz"> 
</div>

компонент Image (CSS-файл):

.application-title IMG 
{ 
    float: left; 
    margin-top: 5px; 
    margin-right: 10px; 
    opacity: 1; 
    margin-left: 0px; 
    visibility: hidden; 
}

источник

2015-03-03 Neophile

Это невозможно только с помощью CSS. Является ли вариант JavaScript? – aaronk6

Возможно, у вас нет доступа к HTML ... но у вас есть доступ к файлу изображения? Почему бы просто не переписать изображение с новым? –

На самом деле есть взломать это, что может сработать. Я отведу его в ответ. – lharby

Вы можете использовать фоновое изображение

.application-title img { 
 
    width:200px; 
 
    height:200px; 
 
    box-sizing:border-box; 
 
    padding-left: 200px; 
 
    /*width of the image*/ 
 
    background: url(http://lorempixel.com/200/200/city/2) left top no-repeat; 
 
}

<div class="application-title"> 
 
    <img src="http://lorempixel.com/200/200/city/1/"> 
 
</div><br /> 
 
Original Image: <br /> 
 

 
<img src="http://lorempixel.com/200/200/city/1/">

источник

2015-03-03 12:49:45 Pete

Человек, вы не поверите. Я сам нашел это решение. Его коробка-размер и отступы, которые заставили бы его работать мгновенно. – Neophile

Пила эта ссылка, и я был как .. booya! https://css-tricks.com/replace-the-image-in-an-img-with-css/ – Neophile

Вы можете удалить изображение

.application-title IMG { 
    display:none; 
}

И добавить свои собственные к контейнер

.application-title { 
    background-image: url("pathtoyourimage/header.png"); 
    height: 200px; //set it to your image height. 
}

источник

2015-03-03 12:49:10 Persijn

Пробовал это. К сожалению, это не работает. – Neophile

Что это значит? здесь действует css. Замените URL-адрес URL-адресом img и отобразите img. – Persijn

@ TheNewbie, что техника будет работать, но для этого может потребоваться добавить дополнительные параметры CSS. – lharby

Вы могли бы сделать это, но это Hacky

.application-title { 
    background:url("/path/to/image.png"); 
    /* set these dims according to your image size */ 
    width:500px; 
    height:500px; 
} 

.application-title img { 
    display:none; 
}

Вот рабочий пример:

http://jsfiddle.net/5tbxkzzc/

источник

2015-03-03 12:50:21 lharby

Пробовал, что. Это не работает. – Neophile

Я добавил jsfiddle. Пришлось добавить ширину и высоту, но она работает. – lharby

Вот еще один грязный хак :)

.application-title > img { 
display: none; 
} 

.application-title::before { 
content: url(path/example.jpg); 
}

источник

2015-03-03 13:05:19 matcygan

Заменить расположение изображения src с помощью CSS

ответ

Смежные вопросы