2

我有一张图片，需要在图片下方添加“点击放大”文字，但只能使用 CSS 来做到这一点。

这是我到目前为止所拥有的，但是，我似乎无法正确定位它。它似乎漂浮在图像的右侧。我怎样才能让它直接在图像下方和左侧？

#main_image:after{ 
content:"click image to enlarge";
text-align:left;
position:relative;
left:0;
clear:both;
margin-bottom:10px;
}
4

3 回答 3

1

这是使用伪元素添加标题的一种方法。

您的HTML可能如下所示：

<a class="main_image" ><img src="http://placekitten.com/300/200" /></a>

你的CSS可能是：

.main_image {
    border: 1px solid blue;
    padding: 10px 10px 40px 10px;
    display: inline-block;
    position: relative;
}
.main_image img {
    vertical-align: top;
}
.main_image:after { 
    content: "click image to enlarge";
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    height: 40px;
    background-color: beige;
    text-align: center;
}

将伪元素添加到<a>标签中，然后根据需要定位它。

我使用了绝对定位，但还有其他选择。

参见演示：http: //jsfiddle.net/audetwebdesign/fQyhj/

于 2013-08-03T14:33:06.653 回答
1

只需添加display: block：http: //jsfiddle.net/fQyhj/4/

#main_image:after{ 
    content:"click image to enlarge";
    text-align:left;
    position:relative;
    margin-bottom:10px;
    display: block;
}

我假设你#main-image的不是图像本身，而是因为你看到了文字，所以它周围有一些包装。

作为参考，伪元素不适用于“替换”元素：http ://www.red-team-design.com/css-generated-content-replaced-elements

于 2013-08-03T14:38:03.297 回答
0

您必须添加另一个<div>才能做到这一点。见小提琴

我习惯margin-top: -80px;将文字放在图像上。

于 2013-08-03T13:15:16.247 回答