CSS를 사용하여 이미지 바꾸기

Question

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

이미지를 바꾸는 기술은 있습니까? 이미지의 배경을 이미지로 설정 한 다음 이미지의 전경을 숨기거나 이동 (이미지 src 요소) 할 수 있습니까?

바꾸려는 이미지가있는 사이트의 스킨을 쓰려고합니다. 감사.

나는 HTML 또는 JavaScript를 변경하지 않고 순수한 CSS로이 작업을 수행하려고 노력하고 있습니다.

맞습니다. 기존 페이지에 새 스타일 시트를 추가하려고합니다. HTML을 수정하거나 자바 스크립트를 사용할 수 없다고합시다.

Answer 1

약간의 땜질 후에, 나는 그것을 알아 낸 것입니다!

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의 이전 버전에서는 완벽하지 않게 보입니다.

Answer 2

아마도 요소의 불투명도를 설정하고 배경을 원하는 이미지로 설정할 수 있습니다.

Musicfreak : 두 개의 요소를 사용했습니다.

Answer 3

두 주마다 서로 다른 클래스를 지정하고 이벤트가 발생하면 이미지가 변경되도록 자바 스크립트를 작성합니다. 예를 들어

:

.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" 
} 

Answer 4

가장 좋은 방법은 배경 위치를 설정하는 것입니다. 먼저 두 개의 서로 다른 이미지를 만들어 동일한 이미지에서 서로 위에 놓습니다. 스킨 요소가 50x50 픽셀이라면 50x100 이미지를 만듭니다.

는 다음과 같은 몇 가지 코드를 사용

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

그래서 당신이 필요한 양만큼 배경을 이동 두 번째 이미지를 볼 수 있습니다. 자바 스크립트 나 서버 측 코드를 사용하여 적절한 클래스를 설정할 수 있습니다.

Answer 5

이미지를 둘러싼 요소가있는 경우 (예 : DIV를 사용하면 배경 이미지를 no-repeat 및 position과 함께 설정 한 다음 이미지를 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">