Wie Effekt für reaktions mit Bild

Hallo machen! Ich machte das obige Bild für 320x767 Pixel Bildschirmauflösung ansprechend. Mein Code funktioniert ordnungsgemäß.

Allerdings habe ich ein Problem, der Schatteneffekt, der auf dem Bild erzeugt wird, verhält sich nicht entsprechend. Was ich will ist, wie mein Bild kleiner wird, sollte der Schatten auch mit der Bildhöhe kleiner werden. Oder sollte es reagieren reagieren Was soll ich dafür tun?

html

<body> 
<div class=" background-img"> 
    <img src="img/learning.jpg" class="img-responsive"> 
    <div class="overlay"> 
    </div> 
    </div> 
</body>

Css

.background-img{ 
    max-width: 100%; 
    height: auto; 

} 

.overlay{ 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%; 
    z-index: 10; 
    background-color: black; 
    opacity: 0.5; 
} 
@media only screen and (min-width:320px) and (max-width:767px){ 

    .background-img{ 
     width: 426px !important; 
     height: 320px !important ; 
    } 
    .overlay{ 
    position:fixed; 
    top: 0; 
    left: 0; 
    width: 30% !important; 
    height: 25%!important; 
    z-index: 10; 
    position: absolute; 
    background-color: black; 
    opacity: 0.5; 
}

Quelle

2016-05-11 bc110402307 Syed Zeeshan Haide

entfernen 'Position: fixed 'ein absoluter Wille tun und setzen Sie Ihre Breite und Höhe auf 100% fügen Sie auch' position: relativ' zu background-img – winresh24

versuchen Sie mit Position als relativ. –

Mögliches Duplikat von [Bildüberlagerung bei bootfähigen Bildern mit ansprechender Größe] (http://stackoverflow.com/questions/21263800/image-overlay-on-responsive-sized-images-bootstrap) –

Wir in der Regel einen Z-Index Erklärung an den popout div mit einem etwas höheren Wert gelten (10, wie Sie verwenden), zusammen mit einer position: relative; Deklaration, die bewirkt, dass der Z-Index-Wert angewendet wird. Hier ist der Code ändern, wenn Sie die Art und Weise sind folgende ich verstanden:

@media only screen and (min-width:320px) and (max-width:767px){ 

.background-img{ 
    position:relative; 
    max-width: 100%; 
    height: auto; 
} 
.overlay { 
    position: relative; 
    top: 0; 
    left: 0; 
    width: 100% !important; 
    height: 100% !important; 
    z-index: 10; 
    background-color:black; 
    opacity: 0.5; 
}

Quelle

2016-05-11 07:21:36

Ich möchte nicht Breite und Höhe der Overlay-Klasse 100%, eher als ich will es sein, Breite: 55% und Höhe 50%. Also in deiner Lösung; es funktioniert nicht. –

Weil Sie % in Höhe und Breite des Overlay verwenden.

Gib eine feste Höhe und Breite in px

.overlay{ 
    position:fixed; 
    top: 0; 
    left: 0; 
    width: 100px !important; // set accordinly 
    height: 100px !important;// set accordinly 
    z-index: 10; 
    position: absolute; 
    background-color: black; 
    opacity: 0.5; 
}

Breite und in % deklarierten Höhe auf die Höhe und die Breite der Mutter nach funktioniert. Wenn Sie nicht möchten, dass das Kind seine Höhe und Breite ändert, definieren Sie es einfach in px für alle Bildschirme.

Quelle

2016-05-11 07:10:52

Nicht unnötig downvote ... Kommentar einen Grund dafür .. –

Ihre Lösung hat nicht funktioniert .. –

Versuchen mit diesem CSS:

.background-img { 
    max-width: 100%; 
    height: auto; 
    position: relative; 
} 

.overlay { 
    position: absolute; 
    top: 0; 
    left: 0; 
    bottom: 0; 
    right: 0; 
    z-index: 10; 
    background-color: black; 
    opacity: 0.5; 
} 

@media only screen and (min-width:320px) and (max-width:767px) { 
    .background-img{ 
     width: 426px !important; 
     height: 320px !important ; 
    } 
}

Quelle

2016-05-11 07:20:54 Arg0n

Sie diesen Code versuchen, können Sie nicht Abfrage brauchte, um es ansprechbar zu machen: https://jsfiddle.net/52ms14gf/1/

.background-img .overlay{ 
    position: absolute; 
    overflow: hidden; 
    top: 0; 
    left: 0; 
} 

.background-img .overlay { 
    opacity: 1; 
    width: 100%; 
    height: 100%; 
    background-color: rgba(255, 51, 51, 0.5); 
} 
.container{position:relative; 
    } 

.container img{width:100%; 
display:block; 
}

Quelle

2016-05-11 07:39:45 winresh24

Hey! Es gibt nur ein Problem mit Ihrer Lösung. Die Überlagerung geht über die Bildgrenze hinaus. Wie soll ich das kontrollieren? –

Werfen Sie einen Blick auf das Bild, das nicht richtig beschnitten wurde Versuchen Sie es zu ändern – winresh24

Mein aktuelles Bild sehen –

Wie Effekt für reaktions mit Bild

Antwort

Verwandte Themen