Question

如何使不透明度图层与img相同。现在，不透明度层与我的img具有相同的尺寸，但这仅仅是因为我编辑的尺寸太大了，但是当我将屏幕缩小时，它将不再是与img相同的尺寸。

PS：有没有办法制作内容：“工作”;显示在img的中间而不是顶部？

HTML：

<body>

<img id="logo" src="Images/logo.png" alt="Logo">
<hr id="line"  size="4" color="#09b981" align="center">

<a id="reach" href="about.html"><img src="Images/Reach.png" alt="Reach"></a>
<a id="contact" href="contact.html"><img src="Images/contact.png" alt="contact"></a>
<a id="werk" href="work.html"> <img src="Images/work.png" alt="werk"> </a>



</body>

的CSS：

 #reach img
        {
            text-align: center;
            display: block;
            margin: 0 auto;
            width: 100%;
            height:auto;
        }
    #reach:after {
            content:'Work';
            color:#fff;
            position:absolute;
            margin-top:11.2%;
            margin-left: 25.2%;
            width:49.6%; height:40.3%;
            top:0; left:0;
            background:rgba(0,0,0,0.6);
            opacity:0;
            transition: all 0.8s;
            -webkit-transition: all 0.8s;
            font-size: 42px;
            font-family: Helvetica;
        }

        #reach:hover:after 
        {
            opacity:1;
        }

Answer 1

实际上，您为实际为size元素的图层错误地设置了left和top，:after。您可以为其设置left:0，top:0和width:100%，height:100%，并为position:relative元素使用a。 img的大小应符合父a元素的大小：

#reach  {
  text-align: center;
  display: block;
  margin: 0 auto;
  width: 50%;
  position:relative; /* add this */
}
#reach:after {
  content:'Work';
  color:#fff;
  position:absolute;        
  /* update this */
  width:100%;
  height:100%;
  top:0;
  left:0;
  /*------*/
  background:rgba(0,0,0,0.6);
  opacity:0;
  transition: all 0.8s;
  -webkit-transition: all 0.8s;
  font-size: 42px;
  font-family: Helvetica;
}

如何使不透明度层与img相同

1 个答案:

Demo.