悬停图像不居中

Question

使用 pingendo 并尝试使用悬停选项制作图像背景。因此，主图像应位于页面中间，当您将鼠标悬停在其上时，会出现第二张图像。那部分有效，但它在左边，如果你在 phone 上看它，它就在右边。我已经尝试了所有方法，但无法使页面正确居中。这就是我最初使用它的方式，它运行良好

<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

试试这个

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

Answer 2

请整页查看。

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

悬停图像不居中

Onhover image not centering

css

center

hover