Onhover 이미지가 가운데 맞춤이 아닙니다.

pingendo를 사용하고 on hover 옵션을 사용하여 이미지 배경을 만들려고합니다. 따라서 메인 이미지는 페이지 중간에 위치해야하며 마우스를 가져 가면 두 번째 이미지가 나타납니다. 그 부분은 작동하지만, 왼쪽으로 넘어 가서 전화로 보시면됩니다. 나는 모든 것을 시도했는데 페이지를 올바르게 센터에 올릴 수 없습니다. 나는 원래 있었다 그것은Onhover 이미지가 가운데 맞춤이 아닙니다.

<div class="cover"> 
    <div class="cover-image" style="background-image: url(images/bulb.jpg);"></div> 
</div>

잘 작동하지만

<style type="text/css"> 
    .imgBox 

     { 
      width: 760px; 
      height: 690px; 
      background: url(/images/bulb.jpg) no-repeat; 
     } 
     .imgBox:hover { 
      width: 760px; 
      height: 690px; 
      background: url(/images/bulb1.jpg) no-repeat; 
      } 
</style> 


<div class="imgBox"></div>

출처

2017-09-19 Dorothy

을 시도 머리에이 추가 그래서 나는이 호버에 추가하고 싶었 방법이다 이것을 전체 페이지에서 확인하십시오.

.cover-image{ 
 
    width: 760px; 
 
    height: 690px; 
 
    background: url(https://dummyimage.com/760x690/000/fff) no-repeat; 
 
    background-position:center; 
 
    margin: 0 auto; 
 
    background-size:cover; 
 
} 
 
.cover-image:hover { 
 
    width: 760px; 
 
    height: 690px; 
 
    background-image: url(https://dummyimage.com/800x800/aba4ab/0011ff); 
 
} 
 
@media screen and (max-width:767px){ 
 
.cover-image{ 
 
    width: 100%;  
 
} 
 
.cover-image:hover { 
 
    width: 100%;  
 
} 
 
}

<div class="cover"> 
 
    <div class="cover-image"></div> 
 
</div>

출처

2017-09-19 05:37:48

이렇게 대부분 작동하지만 휴대 전화에서는 이미지가 여전히 큰 화면에만 집중되지 않으므로 크기 조정 문제가있는 것 같습니까? 도울 수 있니? www.matthewpiton.com은 코드 입력을 허용하지 않습니다. – Dorothy

@Dorothy, 지금 코드를 업데이트했는지 확인합니다. 그리고 배경 이미지 높이를 줄이려면 원하는대로 할 수 있습니다. –

AH !! 완벽 해, 고마워 .--) 그냥 제쳐두고, 내가 생각한 휴대폰으로 공중 선회 작업을 할 수있는 방법이 없다. – Dorothy

이

background: url(/images/bulb1.jpg) center no-repeat;

출처

2017-09-19 05:37:43

이 질문에 대한 답변을 제공하지 않습니다. 비평하거나 저자의 설명을 요청하려면 게시물 아래에 의견을 남겨 둡니다. - [리뷰에서] (리뷰/저품절 포스트/17374468) –

사용 배경 위치 : 센터;

.imgBox 
 

 
     { 
 
      width: 760px; 
 
      height: 690px; 
 
      background: url(https://www.gravatar.com/avatar/425932d3f47c235613b3f2057f557414?s=328&d=identicon&r=PG&f=1) no-repeat; 
 
      background-position: center; 
 
     } 
 
     .imgBox:hover { 
 
      width: 760px; 
 
      height: 690px; 
 
      background: url(https://www.gravatar.com/avatar/387d05f57adc80d01785be7dc7a506c5?s=328&d=identicon&r=PG&f=1) no-repeat; 
 
      background-position: center; 
 
      }

<div class="imgBox"></div>

출처

2017-09-19 05:38:41 Santhoshkumar

Onhover 이미지가 가운데 맞춤이 아닙니다.

답변

관련 문제