如何使叠加效果响应图像答案

【问题标题】：How to make overlay effect responsive with image如何使叠加效果响应图像
【发布时间】：2016-09-06 10:21:24
【问题描述】：

你好！我使上面的图像响应 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;
}

【问题讨论】：

删除 position:fixed 绝对会做并将您的宽度和高度设置为 100% 还将 position:relative 添加到 background-img
尝试使用相对位置。
Image overlay on responsive sized images bootstrap的可能重复
@winresh24 哪个宽度和高度应该是 100%？并且在媒体查询中背景图像需要设置在相对位置？
等我给你做个小提琴

标签： javascript html css media-queries

【解决方案1】：

您可以尝试使用不需要查询的代码来使其响应： 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;
 }

【讨论】：

嘿！您的解决方案只有一个问题。超出图像边界的叠加层。我应该如何控制它？
看看没有正确裁剪的图像尝试更改它
在哪里？粘贴链接
查看上面我的问题所附的图片
好的再检查一遍我更新小提琴中的图像jsfiddle.net/52ms14gf/2

【解决方案2】：

我们通常将 z-index 声明应用于弹出 div，使用稍高的值（您使用的是 10）以及 position: 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;
}

【讨论】：

我不希望覆盖类的宽度和高度为 100%，而不是我希望它是宽度：55% 和高度 50%。所以在你的解决方案中；它不工作。

【解决方案3】：

试试这个 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 ;
    }
}

【讨论】：

【解决方案4】：

因为您在叠加层的高度和宽度中使用了%。

在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】：

我像这样使用 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%;
}

这在所有屏幕宽度上都运行良好。

【讨论】：