Onhover图像不对中

Question

使用pingendo并尝试使用on悬停选项来处理图像背景。因此，主图像应该集中在页面的中间，当您悬停在它上面时，会出现第二个图像。这部分起作用了，但是它在左边，如果你在电话上看它的话，就会向右看。我已经试过了所有的东西，但我无法使页面正确地对中。这就是我最初拥有它的方式，它运行得很好。

<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>

Answer 1

请检查这一整页。

​

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

​

Answer 2

尝尝这个

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

Answer 3

使用背景位置:中心；

​

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

​