如何使疊加效應響應與圖像

您好！我使上述圖像響應320x767像素的屏幕分辨率。我的代碼工作正常。

但是，我有一個問題，在圖像上創建的陰影效果沒有反應。我想要的是隨着我的形象變得更小，隨着形象的高度，陰影也應該變小。或者它應該表現得很敏感我該怎麼做？

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

來源

2016-05-11 bc110402307 Syed Zeeshan Haide

刪除'位置：固定'絕對會做，並將您的寬度和高度設置爲100％還添加'位置：相對'background-img – winresh24

嘗試使用位置作爲相對。 –

可能重複[圖像覆蓋響應大小的圖像引導]（http://stackoverflow.com/questions/21263800/image-overlay-on-responsive-sized-images-bootstrap） –

我們通常使用略高值（10，你正在使用），以位置沿着應用的z-index聲明的彈出式視窗DIV：相對的;聲明導致z-index值被應用。這裏，如果你跟隨我的理解方式的代碼更改：

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

來源

2016-05-11 07:21:36

我不希望覆蓋類的寬度和高度100％而不是我希望它是寬度：55％和高度50％。所以在你的解決方案中它不工作。 –

由於您使用的是高度和覆蓋的寬度%。

給一個固定的高度和寬度在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; 
}

寬度和高度在%宣佈將根據高度和父的寬度工作。如果您不想讓孩子改變其高度和寬度，只需在px中爲所有屏幕定義它。

來源

2016-05-11 07:10:52

不要多餘downvote ...評論一個理由吧.. –

你的解決方案沒有工作親愛的.. –

嘗試使用這個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 ; 
    } 
}

來源

2016-05-11 07:20:54 Arg0n

你可以試試這個代碼，你也沒必要查詢，使其響應： 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; 
}

來源

2016-05-11 07:39:45 winresh24

嘿！解決方案只有一個問題。超越圖像邊界的疊加層。我應該如何控制它？ –

看看它沒有正確裁剪的圖像嘗試改變它 – winresh24

看到我的更新圖像 –

如何使疊加效應響應與圖像

回答

相關問題