Question

我在使用锚点和图片标签时遇到了一些问题。我的图像标签位于（基本上）每个div标签内，div标签具有恒定的高度和宽度值。图像标签具有恒定的高度值，因此可以根据它们的纵横比计算它们的宽度，并且当它们被调整大小以适合div内部时，图像不会变形。

我希望在每张图片周围都有一个锚标记，原因有两个。（1.）因此，图像可以充当链接，但也可以（2.），以便当用户将鼠标悬停在图像上时，我可以在图像的顶部显示叠加。

将图像标记放在锚标记中可以解决链接问题，但至于第二个问题，我很难过。我需要锚标签来动态调整大小并将其自身定位在各自的图像标签上。理想情况下，我想避免使用JavaScript来解决问题，只是坚持使用CSS（如果可能的话）。如果需要，我不反对添加一些额外的标记。

相关HTML：

<listitem>

    <a href="#"><img src="../images/image1.jpg"/></a>

</listitem>

<!--More listitems with different sized images go here-->

CSS：

#pictureListContainer listitem {

    position: relative;
    background-color: rgba(0,0,0,0.5);
    display: block;
    height: 257px;
    width: 636px;
}

#pictureListContainer listitem img {

    position: relative;
    float: right;
    height: 203px !important;
    vertical-align: middle;
    margin: 21px 296px 21px auto;

    border: 6px solid white;
    border-radius: 6px;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
}

提前致谢。

更新：我应该说清楚我希望叠加层与图像具有相同的尺寸，以便它只覆盖图像。

Answer 1

只能使用CSS和HTML：JSFiddle

HTML

<div class="listitem">
    <a href="#">
        <img src="http://sublantic.net/forge/demos/img/code_canyon/scale.png" alt="image" />
        <span class="overlay-text">Test</span>
    </a>
</div>

CSS

.listitem {

    position: relative;
    background-color: rgba(0,0,0,0.5);
    display: block;
    height: 257px;
    width: 636px;
    overflow: hidden;
}

.listitem img {

    position: relative;
    float: right;
    height: 203px !important;
    vertical-align: middle;
    margin: 21px 296px 21px auto;

    border: 6px solid white;
    border-radius: 6px;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
    position: relative;
}

.listitem a span {
    display: none;
    position: absolute;
    bottom: 10px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    padding: 10px;
    color: #FFF;
}

.listitem a:hover span {
    display: block;
}

编辑：叠加适合图像

JSFiddle

CSS

.listitem {

    position: relative;
    background-color: rgba(0,0,0,0.5);
    display: block;
    height: 257px;
    width: 636px;
}

.listitem img {
    border: 6px solid white;
    border-radius: 6px;
    box-shadow: 0px 0px 3px rgba(0,0,0,0.7);
}

.listitem a {
    position: relative;
    overflow: hidden;
    display: inline-block;
}

.listitem a span {
    display: none;
    position: absolute;
    bottom: 10px;
    left: 0;
    background-color: rgba(0, 0, 0, 0.6);
    width: 100%;
    padding: 10px;
    color: #FFF;
}

.listitem a:hover span {
    display: block;
}

Answer 2

您可以使用onClick作为图片

<img src="" onClick="" />

这将消除为a标签生成叠加等功能的麻烦，您可以同时使这两种效果同时工作。

希望这有帮助。

在锚标记中包围动态img标记

2 个答案: