CSS 이미지를 대체합니다

StackOverflow https://stackoverflow.com/questions/1080544

  •  22-08-2019
  •  | 
  •  

문제

텍스트를 이미지로 바꾸는 CSS 기술에 익숙합니다. 예를 들어, 여기에 9 가지가 있습니다. http://css-tricks.com/nine-techniques-for-css-image-replacement/

이미지 교체 기술이 있습니까? 어쨌든 이미지의 배경을 이미지로 설정 한 다음 이미지의 전경 (이미지 SRC 요소)을 숨기거나 움직입니다.

교체하고 싶은 이미지가있는 사이트의 피부를 쓰려고합니다. 감사.

내가 이해하는 방식으로부터 그는 HTML 또는 JavaScript를 변경하지 않고 순수한 CSS 에서이 작업을 시도하고 있습니다.

맞아요. 기존 페이지에 새 스타일 시트를 추가하고 있습니다. HTML을 수정하거나 JavaScript를 사용할 수 없다고 가정 해 봅시다.

도움이 되었습니까?

해결책

약간의 땜질을 한 후, 나는 그것을 알아 냈습니다!

img.someclass {
  background: url("NEW IMAGE URL") top right;
  height: 0;
  width: 0;
  padding: 200px 550px 0 0; /* Insert actual image size (height width 0 0) */
}

이것은 실제 이미지 0의 높이와 너비를 만들지 만 상자를 팽창하여 이미지의 크기를 패딩으로 채 웁니다. 이것의 유일한 단점은 이전 버전의 Internet Explorer에서 완벽하게 보이지 않는다는 것입니다.

다른 팁

이미지를 둘러싼 요소 (예 : div)가있는 경우 배경 이미지 (반복 및 위치와 함께)를 설정 한 다음 이미지를 다음으로 설정할 수 있어야합니다. display:none.

또는 여기에는 작동하는 것처럼 보이는 우연한 솔루션이 있습니다. 화면에서 이미지를 배치 한 다음 사용합니다 :after 배경 이미지를 설정하는 의사 요소. 실행 가능해야하지만 값을 올바르게 작동시키기 위해 값과 함께 바이올린이 필요합니다. 그래도 IE6에서는 작동하지 않습니다.

<style>
  img.test {
    background: url('image_to_show.png') no-repeat right top;
    position: relative;
    left: -16000px;
  }
  img.test:after {
    content: ".";
    color: transparent;
    display: block;
    width: 16000px;
  }
</style>

<img class="test" src="image_to_hide.png">

이미지를 교체하는 가장 좋은 방법은 배경 위치를 설정하는 것입니다. 먼저 두 개의 다른 이미지를 생성하고 다른 이미지를 같은 이미지에 넣습니다. 피부 요소가 50x50 픽셀이라고 말하면 50x100 이미지를 만듭니다.

그런 다음 다음과 같은 코드를 사용하십시오.

.skinElement1 {
  background: #fff url("image.png") no-repeat 0 0;
}
.skinElement2 {
  background: #fff url("image.png") no-repeat 0 -50px;
}

따라서 두 번째 이미지를 보려면 필요한 양으로 배경을 이동합니다. JavaScript 또는 서버 측 코드를 사용하여 적절한 클래스를 설정할 수 있습니다.

어쩌면 요소의 불투명도를 설정 한 다음 원하는 이미지로 배경을 설정할 수 있습니다.

MusicFreak : 나는 두 가지 요소를 사용하는 것을 의미했습니다.

두 상태에 대해 다른 클래스를 할당 한 다음 이벤트시 이미지를 변경하도록 자바 스크립트를 작성합니다.

예를 들어:

.firsImage { background:transparent url(/images/someImage.jpg) no-repeat; }
.secondIMage { background:transparent url(/images/image2.jpg) no-repeat; }

HTML :

<div id="imageDiv" class="firstImage"> some content </div>
<a onclick="changeImage()">Change the image!</a>

자바 스크립트 :

function changeImage(){
    var imageDiv =  document.getElementById("imageDiv")

    if ( imageDiv.className === "firsImage" )
        document.getElementById("imageDiv").className = "secondImage"
    else
        document.getElementById("imageDiv").className = "firstImage"
}
라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top