프로그래밍 언어/HTML,CSS,JS

CSS로 img 태그의 src 속성을 수정하는 방법

Rateye 2021. 6. 13. 20:49
728x90
반응형
질문 : CSS에서 img 태그의 src 속성에 해당하는 것을 설정할 수 있습니까?

CSS에서 src 속성 값을 설정할 수 있습니까? 현재 내가하고있는 것은 :

<img src="pathTo/myImage.jpg"/>

그리고 나는 그것이 이와 같은 것이기를 원합니다.

<img class="myClass"/>

.myClass {
    some-src-property: url("pathTo/myImage.jpg");

CSS의 background 또는 background-image: 속성을 사용하지 않고이 작업을 수행하고 싶습니다.

답변

content:url("image.jpg") 사용하세요.

완전한 작동 솔루션 (

라이브 데모

) :

<!doctype html>

<style>
.MyClass123{
	content:url("http://imgur.com/SZ8Cm.jpg");
}
</style>

<img class="MyClass123"/>

테스트 및 작동 :

  • 크롬 14.0.835.163
  • Safari 4.0.5
  • 오페라 10.6

테스트되었으며 작동 하지 않음 :

  • FireFox 40.0.2 (개발자 네트워크 도구를 관찰하면 URL이로드되지만 이미지가 표시되지 않음을 알 수 있음)
  • Internet Explorer 11.0.9600.17905 (URL이로드되지 않음)
출처 : https://stackoverflow.com/questions/2182716/is-it-possible-to-set-the-equivalent-of-a-src-attribute-of-an-img-tag-in-css
728x90
반응형