Onhover-Bild nicht zentriert

Verwenden von piggendo und versuchen, einen Bildhintergrund mit einer on Hover-Option zu tun. Das Hauptbild sollte also in der Mitte der Seite zentriert sein, und wenn Sie darüber zeigen, erscheint ein zweites Bild. Dieser Teil funktioniert, aber es ist auf der linken Seite und wenn Sie es auf einem Telefon seinen Weg nach rechts betrachten. Ich habe alles versucht und kann die Seite nicht richtig zentrieren. Dies ist, wie ich hatte es ursprünglich und es funktionierte gutOnhover-Bild nicht zentriert

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

aber dann wollte ich das auf schweben hinzufügen, damit ich diese auf den Kopf

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

Quelle

2017-09-19 Dorothy

Bitte überprüfen Sie dies auf der ganzen Seite.

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

Quelle

2017-09-19 05:37:48

also funktioniert das meistens, aber auf einem Handy ist das Bild immer noch nicht zentriert, nur auf größeren Bildschirmen, also ich denke, ich habe eine Größenänderung Problem? Kannst du helfen? www.matthewpiton.com lässt mich den Code nicht eingeben. – Dorothy

@Dorothy, jetzt pls überprüfen Ich habe den Code aktualisiert. und wenn Sie die Hintergrundbildhöhe verringern möchten, können Sie, wie Sie wollen. –

AH !! das ist perfekt, vielen Dank :-) Nur nebenbei, es gibt keine Möglichkeit, den Schwebeflug an einem Handy arbeiten zu lassen, denke ich? – Dorothy

dieses

versuchen hinzugefügt

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

Quelle

2017-09-19 05:37:43

Dies bietet keine Antwort auf die Frage. Um einen Autor zu kritisieren oder um Klärung zu bitten, hinterlasse einen Kommentar unter seinem Beitrag. - [Aus Bewertung] (/ review/low-quality-posts/17374468) –

Verwenden Hintergrund-Position: Zentrum;

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

Quelle

2017-09-19 05:38:41 Santhoshkumar

Onhover-Bild nicht zentriert

Antwort

Verwandte Themen