Zastąp src z obrazka przy użyciu właściwości css

Czy istnieje sposób zastąpienia obrazu wymienionego w atrybucie SRC zakładki obrazu za pomocą jakiejś sztuczki css?Zastąp src z obrazka przy użyciu właściwości css

<img src = "setting-icon.png"></img>

chcę zastąpić ustawienia-icon.png z właściwości CSS, jestem w stanie umieścić kolejne zdjęcie w tle z właściwości background-image znacznika obrazu ale muszę ukrył te wymienione w src i koncert o czym wspomniałem w własności obrazu tła w css.

Tak, to jest dziwne wymaganie, ale chodzi o to, że robię personalizację w aplikacji innej firmy, w której mam tylko kontrolę nad css, nie mogę modyfikować tagów HTML.

dzięki za przeczytanie!

Źródło

2017-02-23 Mayur Randive

Można użyć content:url("image.jpg")

https://developer.mozilla.org/en-US/docs/Web/CSS/content

w twoich CSS,

.img { 
    content:url("/new/image/source.png"); 
}

Jeśli nie można modyfikować kod HTML,

img { 
    content:url("/new/image/source.png"); 
}

w HTML,

<img class="img"/>

Nie próbowałem tego jeszcze, ale nie jestem pewien, czy wbudowany atrybut src przeważy CSS content.

Aktualizacja

To powinno działać, jeśli masz już swojej img src dla elementu. Thanks @pol

Źródło

2017-02-23 03:46:47

Nie może zmodyfikować HTML, więc zakładam, że nie może dodać "klasy" na obrazie. –

Zmiana na selektor elementów, następnie –

Udało się, zawartość url nadpisuje src z tagu img –

Nie można zmienić wartości atrybutów html za pomocą CSS, tylko javascript.

Ale dzięki CSS można "ukryć" obraz i umieścić tło w jego miejscu.

div img { 
 
    height: 0; 
 
    width: 0; 
 
    padding-top: 175px; 
 
    padding-left: 280px; 
 
    background-image: url("http://www.planwallpaper.com/static/cache/6f/82/6f8200c95d588fde83d1f212f674611a.jpg"); 
 
}

<img src="http://www.planwallpaper.com/static/cache/a1/4e/a14e880ef245c3d159ba96ebbeb4c8c3.jpg"> 
 

 
<div>Changed img:</div> 
 
<div><img src="http://www.planwallpaper.com/static/cache/a1/4e/a14e880ef245c3d159ba96ebbeb4c8c3.jpg"></div>

Źródło

2017-02-23 03:54:43 pol

spróbuje tego i da ci znać za jakiś czas, dziękuję za poświęcony czas! –

@MayurRandive można użyć jQuery/Javascript? –

@ Deepak Yadav: Nie –

Dobre pytanie, aby dowiedzieć się o niezauważalne selektorów wykorzystaniem CSS,

Dodatkowo, można przeczytać więcej na temat innych selektorów,

Na przykład:

img: hover {}

i niektóre inne miłe selektorów na inny zakres elementów

:active 

:after 

:before 

:first-child 

:first-letter 

:first-line 

:focus 

:hover 

:lang 

:link 

:visited

nawet warunkowo można wybrać tak:

img[src="setting-icon.png"] { 
    border: 1px solid #000000; 
    content:url("/new/image/source.png"); 
}

referencyjnego: W3.org - Advanced Selectors

Źródło

2017-02-23 04:34:56 wpcoder

Zastąp src z obrazka przy użyciu właściwości css

Odpowiedz

Powiązane problemy