Programing

CSS에서의 src 속성 정의

lottogame 2020. 8. 18. 08:05
반응형

CSS에서의 src 속성 정의


CSS에서 <img>의 src 속성을 정의해야합니다. 이 속성을 지정하는 방법이 있습니까?


#divID {
    background-image: url("http://imageurlhere.com");
    background-repeat: no-repeat;
    width: auto; /*or your image's width*/
    height: auto; /*or your image's height*/
    margin: 0;
    padding: 0;
}

img 태그는 콘텐츠 요소이므로

img {
    content:url(http://example.com/image.png);
}

아니에요. 당신은 배경 이미지를 지정할 수 있지만 그건 아니 같은 일.


CSS는 DOM 요소 속성에 대한 값을 정의하는 데 사용되지 않으며 javascript가 이에 더 적합합니다.


아니요. 가장 가까운 방법은 배경 이미지를 설정하는 것입니다.

<div id="myimage"></div>

#myimage {
  width: 20px;
  height: 20px;
  background: white url(myimage.gif) no-repeat;
}

이 솔루션을 시도한 후에도 여전히 만족스럽지 않았지만이 기사 에서 솔루션을 찾았 으며 Chrome, Firefox, Opera, Safari, IE8 +에서 작동합니다.

#divId {

  display: block;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  background: url(http://notrealdomain2.com/newbanner.png) no-repeat;
  width: 180px; /* Width of new image */
  height: 236px; /* Height of new image */
  padding-left: 180px; /* Equal to width of new image */

}

맞습니다. IMG는 콘텐츠 요소이고 CSS는 디자인에 관한 것입니다. 그러나 디자인 목적으로 일부 콘텐츠 요소 또는 속성을 사용할 때는 어떻습니까? 스타일 (CSS)을 변경하면 변경해야하는 웹 페이지 전체에 IMG가 있습니다.

이것은 CSS 스타일로 IMG 프리젠 테이션 (실제로 이미지가 아님)을 정의하는 솔루션입니다.
1 : 1x1 투명한 gif 또는 png를 만듭니다.
2 : IMG의 속성 "src"를 해당 이미지에 할당합니다.
3 : CSS 스타일의 "배경 이미지"로 최종 프레젠테이션을 정의합니다.

그것은 매력처럼 작동합니다 :)

참고 URL : https://stackoverflow.com/questions/2676436/define-an-imgs-src-attribute-in-css

반응형