混合模式图层位于图像边框之外

时间：2016-10-18 05:54:47

标签： html css image mix-blend-mode

所以我使用混合混合模式：乘法;在悬停时，在我的图像上创建一个乘法图层的效果。问题是图层超出了图像边框，如下图所示。我试图将宽度和高度设置为.imgcon和.imgcon＆gt; img（参见下面的代码）并且图层适合但是当它在不同的屏幕分辨率下查看时它会混淆响应式网络功能。所以我尝试将宽度和高度设置为100％以保持响应功能，但是图层仍然会离开图像边框。

As you can see, the multiply layer bleeds out of the image

继承我的代码：

.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>

3 个答案:

答案 0 :(得分：2)

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

底部增加的空间是许多元素所具有的，我称之为下行空间。某些字母如＆＃34; g＆＃34;和j＆＃34;在文本行下面。倾角的部分称为下降部分。许多元素为下降者留下了一点空间。要摆脱这个空间，可以将line-height设置为0.

宽度和居中的文字内容对我来说只是一种更简单的方法可以正确居中。

如果您有任何其他问题，请与我们联系！

＆＃13;
＆＃13; 
.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;
}
＆＃13; 
<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>
＆＃13;
＆＃13;
＆＃13;

答案 1 :(得分：1)

您遗失的只是图片父级的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>

那是因为父节点是div，因此它是一个块元素并占用所有可用宽度。将其display更改为inline-block会使其换行到其子项的维度。

答案 2 :(得分：1)

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

.imgcon > img{display:block}
相关问题
最新问题