当我停止使用背景图像时，蒙版位置不正确 [英] Mask position incorrect when I stop using a background image

问题描述

以 http://jsfiddle.net/4UNuB/5/ 为例， image

  .box1 {
 border：＃999 2px solid; 
 width：180px; 
 height：250px; 
 background-image：url（http://smilesoftware.com/assets/images/uploads/products/icon_pdfpenipad_140x140.png）; 
 background-position：center; 
背景重复：不重复; 
} 
  

但是，如果我无法使用背景图片， img src内的div本身就像这样

 < div class =box1> 
< a href =https://placehold.it>< img src =http://placehold.it/180x250>< / a> 
< / div> 
  

掩码不再覆盖图片，而是坐在它下面。

看这个小提琴 http://jsfiddle.net/4UNuB/6/

但是面具仍然应用于同一个地方，为什么它会移动，以及如何阻止它移动？

解决方案

为框添加位置绝对和相对css。

小提琴 here

  .box1 {
 border：＃999 2px solid; 
 width：180px; 
 height：250px; 
 / * background-image：url（http://smilesoftware.com/assets/images/uploads/products/icon_pdfpenipad_140x140.png）; * / 
 background-position：center; 
背景重复：不重复; 
职位：亲属; 
} 
 
 
 .black-box {
 text-align：center; 
 font-size：16px; 
颜色：#fff; 
 background-color：rgba（00,00,00,0.8）; 
宽度：100％; 
身高：100％; 
 opacity：1.0; 
过渡：全部0.5秒缓出; 
位置：绝对; 
 top：0; 
} 
  

Using http://jsfiddle.net/4UNuB/5/ as an example, the image has been set as background

.box1 {
    border: #999 2px solid;
    width: 180px;
    height: 250px;
    background-image:  url(http://smilesoftware.com/assets/images/uploads/products/icon_pdfpenipad_140x140.png);
    background-position: center;
    background-repeat: no-repeat;
}

But, if I can't use a background image, and instead have an img src within the div itself like this

<div class="box1"> 
    <a href="https://placehold.it"><img src="http://placehold.it/180x250"></a>
</div>

The mask no longer covers the image, instead sitting below it.

See this fiddle http://jsfiddle.net/4UNuB/6/

But the mask is still being applied to the same place as before, so why does it move, and how to stop it moving?

解决方案

Add Position Absolute and relative css for boxes.

Check The Fiddle here

  .box1 {
      border: #999 2px solid;
      width: 180px;
      height: 250px;
      /*background-image: url(http://smilesoftware.com/assets/images/uploads/products/icon_pdfpenipad_140x140.png);*/
      background-position: center;
      background-repeat: no-repeat;
      position: relative;
  }


 .black-box {
    text-align: center;
    font-size: 16px;
    color: #fff;
    background-color: rgba(00,00,00,0.8);
    width: 100%;
    height: 100%;
    opacity: 1.0;
    transition: all 0.5s ease-in-out;
    position: absolute;
    top: 0;
}

这篇关于当我停止使用背景图像时，蒙版位置不正确的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！