Question

使用pingendo并尝试使用on hover选项创建图像背景。因此，主图像应位于页面中间，当您将鼠标悬停在其上时，会出现第二个图像。那个部分可以工作，但它在左边，如果你在手机上看它正确的方式。我已经尝试了所有内容，但我无法正确地将页面置于中心位置。这就是我最初拥有它并且工作正常的方式

<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

使用 background-position：center;

＆＃13;

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

＆＃13;

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

＆＃13;

Onhover图像不居中

3 个答案: