如何使疊加效果響應圖像
[英]How to make overlay effect responsive with image
問題描述
你好！ 我使上面的圖像響應 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;
}
5 個解決方案
解決方案1
2 2016-05-11 07:39:45
你可以試試這個你不需要查詢的代碼來讓它響應： 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;
}
解決方案2
1 2016-05-11 07:20:54
試試這個 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 ;
}
}
解決方案3
1 已采納 2016-05-11 07:21:36
我們通常將 z-index 聲明應用到 popout div 上，使用稍高的值（如您使用的 10），以及位置：relative; 導致應用 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;
}
解決方案4
0 2016-05-11 07:10:52
因為您在疊加層的高度和寬度中使用了% 。
以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定義它。
解決方案5
0 2021-01-06 17:02:03
我像這樣使用了 CSS-grid：
.container {
display: grid;
grid-template-columns: 1fr;
grid-template-rows: 1fr;
}
.img-responsive {
grid-column: 1/2;
grid-row: 1/2;
width: 100%;
}
.overlay {
grid-column: 1/2;
grid-row: 1/2;
width: 100%;
}
這適用於所有屏幕寬度。
響應圖像疊加，在另一個html元素上具有懸停效果
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.