混合模式图层超出图像边界

Question

所以我使用了 mix-blend-mode: multiply;悬停时在我的图像顶部创建一个多层的效果。问题是图层超出了图像边界，如下图所示。我尝试将宽度和高度设置为 .imgcon 和 .imgcon > img（请参阅下面的代码）并且图层适合，但是当在不同的屏幕分辨率下查看时它会弄乱响应式 Web 功能。所以我尝试将宽度和高度设置为 100% 以保持响应功能，但图层仍然超出图像边界。

这是我的代码：

.imgwrapper {
  position: relative;
}



.imgcon + div {
 position: absolute;
  left: 42%;
  top: 44%;
  color: white;
  text-decoration: underline;
  opacity:0;
  display: block;
  pointer-events: none;
  font-size: 18px;
  
  letter-spacing: 4px;

}

.imgcon {
 position: relative;
 background: rgba(209, 19, 15, 0);
  transition: ease 0s;
  -webkit-transition: ease 0s;
  -moz-transition: ease 0s;
  -ms-transition: ease 0s;
  -o-transition: ease 0s;
   mix-blend-mode: multiply;
}
.imgcon > img {
 transition: ease 0s;
  -webkit-transition: ease 0s;
  -moz-transition: ease 0s;
  -ms-transition: ease 0s;
  -o-transition: ease 0s;
}
.imgcon:hover {
  background: #b41f24;
    background: rgba(180, 31, 36, 0.85);


}
.imgcon:hover > img {
  z-index: -1;
  -webkit-filter: grayscale(100%) blur(1.5px) contrast(100%);
  filter: grayscale(100%) blur(1.5px) contrast(100%) ;
  mix-blend-mode: multiply;

}

.imgcon:hover + div {
  display: block;
  opacity: 1;
  z-index: 1;
}

<a href="works.html?option=emkoinvite" class="permalink">
     <div class="desktop-3 mobile-half columns">
      <div class="item first-row">
       <h3>EmKO invitation</h3>
       <span class="category">Identity, print</span>

       <div class="imgwrapper">
       <div class="imgcon">
       <img src="http://i.imgur.com/XmhcxJS.png" /></div>
       <div id="view">view</div></div>
      </div><!-- // .item -->
     </div><!-- // .desktop-3 -->
    </a>

Answer 1

您只缺少图像 parent 上的 display: inline-block;:

.imgwrapper {
  position: relative;
}
.imgcon + div {
 position: absolute;
  left: 42%;
  top: 44%;
  color: white;
  text-decoration: underline;
  opacity:0;
  display: block;
  pointer-events: none;
  font-size: 18px;
  letter-spacing: 4px;
}
.imgcon {
 display: inline-block;
 position: relative;
 background: rgba(209, 19, 15, 0);
  transition: ease 0s;
  -webkit-transition: ease 0s;
  -moz-transition: ease 0s;
  -ms-transition: ease 0s;
  -o-transition: ease 0s;
   mix-blend-mode: multiply;
}
.imgcon > img {
 transition: ease 0s;
  -webkit-transition: ease 0s;
  -moz-transition: ease 0s;
  -ms-transition: ease 0s;
  -o-transition: ease 0s;
}
.imgcon:hover {
  background: #b41f24;
  background: rgba(180, 31, 36, 0.85);
}
.imgcon:hover > img {
  z-index: -1;
  -webkit-filter: grayscale(100%) blur(1.5px) contrast(100%);
  filter: grayscale(100%) blur(1.5px) contrast(100%) ;
  mix-blend-mode: multiply;
}
.imgcon:hover + div {
  display: block;
  opacity: 1;
  z-index: 1;
}

<a href="works.html?option=emkoinvite" class="permalink">
     <div class="desktop-3 mobile-half columns">
      <div class="item first-row">
       <h3>EmKO invitation</h3>
       <span class="category">Identity, print</span>
       <div class="imgwrapper">
       <div class="imgcon">
       <img src="http://i.imgur.com/XmhcxJS.png" /></div>
       <div id="view">view</div></div>
      </div><!-- // .item -->
     </div><!-- // .desktop-3 -->
    </a>

那是因为 parent 是一个 div，因此它是一个块元素并占用所有可用宽度。将它的 display 更改为 inline-block 会使它 wrap 到它的 children.

的尺寸

Answer 2

.imgwrapper {
    position: relative;
    display: inline-block;
}

.imgcon > img{display:block}

Answer 3

这是您的解决方案。解释一下，任何块元素在默认情况下都是其父元素的 100% 宽度。如果您希望元素保持其容器的宽度，则需要使用不同的 display 属性； inline-block 似乎在这里最有意义。

底部加的space是很多元素都有的东西，我称之为下行space。某些字母，如 "g" 和 j" 浸入文本行下方。浸入的部分称为下降部分。许多元素为下降部分留出一点空间。要摆脱这种 space，您可以设置 line-height 到 0。

文本的宽度和居中只是让我更容易将文本正确居中的方法。

如果您有任何其他问题，请告诉我！

.imgwrapper {
  position: relative;
}



.imgcon + div {
 position: absolute;
  text-align: center;
  top: 42%;
  width: 256px;
  color: white;
  text-decoration: underline;
  opacity:0;
  display: block;
  pointer-events: none;
  font-size: 18px;
  
  letter-spacing: 4px;

}

.imgcon {
 position: relative;
 display: inline-block;
 line-height: 0;
 background: rgba(209, 19, 15, 0);
  transition: ease 0s;
  -webkit-transition: ease 0s;
  -moz-transition: ease 0s;
  -ms-transition: ease 0s;
  -o-transition: ease 0s;
   mix-blend-mode: multiply;
}
.imgcon > img {
 transition: ease 0s;
  -webkit-transition: ease 0s;
  -moz-transition: ease 0s;
  -ms-transition: ease 0s;
  -o-transition: ease 0s;
}
.imgcon:hover {
  background: #b41f24;
    background: rgba(180, 31, 36, 0.85);


}
.imgcon:hover > img {
  z-index: -1;
  -webkit-filter: grayscale(100%) blur(1.5px) contrast(100%);
  filter: grayscale(100%) blur(1.5px) contrast(100%) ;
  mix-blend-mode: multiply;

}

.imgcon:hover + div {
  display: block;
  opacity: 1;
  z-index: 1;
}

<a href="works.html?option=emkoinvite" class="permalink">
     <div class="desktop-3 mobile-half columns">
      <div class="item first-row">
       <h3>EmKO invitation</h3>
       <span class="category">Identity, print</span>

       <div class="imgwrapper">
       <div class="imgcon">
       <img src="http://i.imgur.com/XmhcxJS.png" /></div>
       <div id="view">view</div></div>
      </div><!-- // .item -->
     </div><!-- // .desktop-3 -->
    </a>

混合模式图层超出图像边界

Blend mode layer goes outside image border

html

css

image

mix-blend-mode