CSS 클립을 바꿀 때 이미지가 사라집니다. rect 속성

클립을 사용하여 축소판으로 이미지를 클립하고 롤오버에서 클립 사각형을 임의로 배치하려고합니다. 내 코드 :CSS 클립을 바꿀 때 이미지가 사라집니다. rect 속성

$('.itembox').mouseover(function() { 
    var img = $(this).find('img'); 
    var width = img[0].width; 
    var height = img[0].height; 
    var clipwidth = Math.floor($(this).width()); 
    var clipheight = Math.floor($(this).height()); 

    var widthrange = width - clipwidth; 
    var heightrange = height - clipheight; 

    var x = Math.floor(Math.random() * widthrange); 
    var y = Math.floor(Math.random() * heightrange); 
    var x2 = x + clipwidth; 
    var y2 = y + clipheight; 

    img.css('clip', 'rect('+x+'px '+x2+'px '+y+'px '+y2+'px)'); 
    $(this).children('.itemboxbg').show(); 
    $(this).css({'color' : 'white'}); 

});

그것은 사전 CSS를 잘 작동 :

.itemboxbg { 
    border: none; 
    position:absolute; 
    width:193px; 
    height:273px; 
    z-index:0; 
} 
.itemboxbg img { 
    border: none; 
    position: absolute; 
    clip: rect(0px 193px 273px 0px); 
}

하지만 롤오버 이벤트가 발생하고 이미지가 사라 CSS를 변경합니다. CSS는 괜찮습니다. 예 :

<img src="./img/exampleimage.png" style="clip: rect(304px 498px 72px 344px);">

어떤 도움을 받으실 수 있습니다. <top> 및 <bottom> 박스의 위쪽 테두리의 가장자리에서 오프셋을 지정하는 곳 RECT가

rect(<top> <right> <bottom> <left>);

을

을 정의하고, <right> 및 <left> : 클립 이후

img.css('clip', 'rect('+y+'px '+x2+'px '+y2+'px '+x+'px)');

출처

2012-12-18 edzillion

.itemboxbg가 작동합니까? img 태그 주위의 래퍼 div입니까? – Jason

JQuery의'$ ('. itembox')'는'$ ('. itemboxbg')'일 수 있습니까? – Jason

nah itembox는 눈금의 각 항목을 보유하는 div이며, jquery는 정상적으로 실행되고 css fine을 업데이트하고 chrome dev 도구는 stlye 요소를 표시하지만 이미지는 사라지지만 이미지는 사라집니다. – edzillion

바보, 그것은 있었어야 상자의 왼쪽 테두리 가장자리에서 간격 띄우기를 지정하십시오. 이미지 박스 내에서 표시되지 않기 때문에, 아마도 내가 대신

편집 배경 위치 사용해야 아직하지만

하지 솔루션

: 절대 왼쪽 & 최고 위치 변경 확인을 다시 상자에 이미지를 이동 :

img.css('left', -x+'px'); 
img.css('top', -y+'px');

출처

2012-12-19 02:00:21 edzillion

CSS 클립을 바꿀 때 이미지가 사라집니다. rect 속성

답변

관련 문제