Question

我想简单地用一块颜色覆盖这4个图像，并在每个图像的中间对齐文本。但是我目前使用“position：absolute”来使每个图像处于正确的位置和z-index等。我发现很难尝试这样的事情：http://jsfiddle.net/jimjeffers/mG78d/1/并让它发挥作用。我的位置绝对似乎总是破坏我从stackoverflow和其他人那里尝试的其他代码，甚至尝试了一些jquery脚本。

实时网址：http://bit.ly/1k7RgDS

HTML

<div class="index-gallery">
            <img src="<?php HTTP_HOST ?>/Images/1.JPG" alt="" class="img1" />
            <img src="<?php HTTP_HOST ?>/Images/2.JPG" alt="" class="img2" />
            <!-- <img src="<?php //HTTP_HOST ?>/Images/3.JPG" alt="" class="img3" /> -->
            <img src="<?php HTTP_HOST ?>/Images/6.JPG" alt="" class="img3" />
            <img src="<?php HTTP_HOST ?>/Images/5.JPG" alt="" class="img4" />
        </div>

CSS

#index-gallery .index-gallery { margin-bottom: 30px; }
#index-gallery .index-gallery img:hover { opacity:0.6; filter:alpha(opacity=40); /* For IE8 and earlier */ }
#index-gallery .index-gallery img:before { content: "Show Home Hemel Hempstead"; }
#index-gallery .index-gallery .img1 { width: 550px; top: 10px; position: absolute; z-index: 3; display: block; }
#index-gallery .index-gallery .img2 { width: 550px; right: 0; position: absolute; z-index: 2; display: block; }
#index-gallery .index-gallery .img3 { width: 400px; top: 400px; left: 10px; position: absolute; z-index: 4; display: block; }
#index-gallery .index-gallery .img4 { width: 710px; top: 400px; right: 0; position: absolute; z-index: 1; display: block; }

我有一些透明度代码可以工作但是更多关注那个JSFIDDLE上的内容，能够在文本中间悬停颜色叠加时将文本置于中间位置。如果你有一个建议会改变我不介意的所有代码，如果这是我迄今为止所做的不好的练习。

Answer 1

所以 - 使用你已经拥有的东西，你可以尝试这条路线。最小的位置更改，我在您的跨度内添加了段落标记，因此您可以绝对定位文本。

http://jsfiddle.net/9H7eM/

<span><p>Hello</p></span>

#overlay {position: relative;}

#overlay span {
    background: red;
    bottom: 0;
    display: block;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    z-index: 1;
}

#overlay span p {
    position: absolute;
    text-align: center;
    width: 100px;
    top: 30px;
    font: bold 16px arial;
}

如果您愿意更改代码，可以尝试类似的方法： http://jsfiddle.net/te6t8/1/

但是，如果你已经对它是如何感到满意的话，坚持你拥有并知道！

CSS叠加在图像上

1 个答案: