html – 图像叠加在响应大小的图像引导

前端之家收集整理的这篇文章主要介绍了html – 图像叠加在响应大小的图像引导前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在尝试创建一个响应的图像(包含描述)的网格,当moused over将有一个颜色覆盖(只是图像,而不是文本).由于图像的响应高度,我有一个问题,覆盖层覆盖了所有内容,而不仅仅是图像.

我可以解决这个问题吗?

我在这里重新创建了一个容易理解的问题:http://jsfiddle.net/r8rFc/

这是我的HTML:

<div class="row">

    <div class="col-xs-12 col-sm-6 col-md-3 project">
        <a href="#">
            <div>
                <img src="http://placehold.it/500x500" class="img-responsive"/>
                <div class="fa fa-plus project-overlay"></div>
            </div>
            <div style="text-align:center;">
                <h3>Project name</h3>
                <p>Image description</p>
            </div>
        </a>
    </div>

</div>

和我的CSS:

.project-overlay {
    position: absolute;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(41,128,185,0.9);
    color: #fff;
    padding: 50%;
}

提前致谢!

解决方法

添加一个类到包含的div,然后设置以下css:
.img-overlay {
    position: relative;
    max-width: 500px; //whatever your max-width should be 
}

位置:对于具有位置的子元素的父元素需要relative:相对于该父对象来定位子对象.

DEMO

原文链接:https://www.f2er.com/html/230470.html

猜你在找的HTML相关文章