Question

目前，当我在图像上方盘旋时，我的彩色背景为0.2不透明，但我现在卡住了。

我希望文本显示在悬停颜色的中间。

现在正好在背景中坐在图像下面。

已编辑 - ＆gt;链接到JS Fiddle：http://jsfiddle.net/K7C95/1/

<div class="first-portfolio-item">
     <a href="#contact"><img src="img/portfolio-item-one.jpg" />
         <span class="small-text">This image is used as an example</span>
     </a>
     </div>

img{
    width: 100%; 
    height: 100%;
   }

a{

    &:hover{

    display: block;
    width: 100%; 
    height: 100%;

    font-size: 10px;
    color: white;

        opacity: 0.2;
    filter:alpha(opacity=20);   

        }   
    }

.first-portfolio-item{
    margin-left: 20px;
    width: 400px;
    height: 600px;
    float: left;

        &:hover{
            display: block;
            background-color:#47b73b; 
               }
        }

Answer 1

您的span类没有样式来定位它。

一种方法是在图像上使用绝对定位，并使用与span_text类相同的span类。

这样你图像的包装div就会把它保存在相对位置，然后可以相应地定位文本。

您应该添加类似

的内容

.small-text{
 position:aboslute;
top:50%;
left:50%;
}

扩展您的img包装器以执行相同的操作并获得结果。

http://jsfiddle.net/jXQ83/

只是非常简短地看一下这个，但它应该给你一个想法。

Answer 2

由于span是a代码的子代，您需要添加位置：相对于锚标记然后将位置：绝对调整到范围然后调整尺寸和位置值以适合

JSFiddle Demo

<强> HTML

<div class="first-portfolio-item">
     <a href="#contact"><img src="http://cdn.cutestpaw.com/wp-content/uploads/2012/07/l-Wittle-puppy-yawning.jpg" />
         <span class="small-text">This image is used as an example</span>
     </a>
</div>

<强> CSS

.first-portfolio-item{
    margin-left: 20px;
    width: 400px;
    height: 600px;
    float: left;
}

a > img {
    width: 100%; 
}
a {
    position: relative;
    display: block;
}
a:hover{
    font-size: 10px;
    color: white;
 }


a:hover img{
    opacity: 0.5;
    filter:alpha(opacity=20);   
    }

.first-portfolio-item a > span.smalltext {
    position: absolute;
    top:0;
    height:100%;
    width: 100%;;
    text-align: center;
    line-height: 600px;;
}

显示<a> tags on a:hover background</a>之间的文字

2 个答案: