名称底部为图片

Question

我正在尝试制作一个图像库，其图像名称位于图像底部。到目前为止我没有成功。

期望结果的图片：

HTML：

<!-- start content -->
    <div class='content'>
        <div class='photo'>
            <div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
            <div class='photo-name'>Name</div>
        </div>
        <div class='photo'>
            <div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
            <div class='photo-name'>Name</div>
        </div>
        <div class='photo'>
            <div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
            <div class='photo-name'>Name</div>
        </div>
        <div class='photo'>
            <div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
            <div class='photo-name'>Name</div>
        </div>
        <div class='photo'>
            <div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
            <div class='photo-name'>Name</div>
        </div>
    </div>
    <!-- end content -->

CSS：

.content {
    background-color: #404040;
    width: 940px;
    margin: 0 auto;
    padding: 20px 10px;
    overflow: hidden;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.photo {
    border-radius: 6px;
    border: 1px solid #ccc;
    width: 298px;
    height: 298px;
    margin-top: 10px;
    margin-left: 10px;
    float: left;
    overflow: hidden;
    position: relative;
}

.photo-name {
    /*margin-top: 245px;*/
    /*padding: 0.5em;*/
    text-align: center;
    background-color: cyan;
    /*background-color: #666666;*/
}

结果：https://jsfiddle.net/h3x2ooax/

Answer 1

您需要为该文本元素提供绝对位置，100％宽度以及距底部边框距离的所需bottom设置：

.photo-name {
  position: absolute;
  width: 100%;
  bottom: 30px;
  text-align: center;
  background-color: cyan;
}

https://jsfiddle.net/1mp8k1by/

Answer 2

您的文字需要显示在position: absolute中，请参阅以下代码段：

＆＃13;

＆＃13;

.content {
	background-color: #404040;
	width: 940px;
	margin: 0 auto;
	padding: 20px 10px;
	overflow: hidden;
	border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
}

.photo {
	border-radius: 6px;
	border: 1px solid #ccc;
	width: 298px;
	height: 298px;
	margin-top: 10px;
	margin-left: 10px;
	float: left;
	overflow: hidden;
	position: relative;
}

.photo-name {
    position: absolute;
    bottom: 15px;
    width: 100%;
    padding: 5px 0;
    font-size: 30px;
    color: white;
	text-align: center;
	background-color: #666666;
    font-style: italic;
    font-family: sans-serif;
}

＆＃13;

	<!-- start content -->
	<div class='content'>
		<div class='photo'>
			<div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
			<div class='photo-name'>Name</div>
		</div>
		<div class='photo'>
			<div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
			<div class='photo-name'>Name</div>
		</div>
		<div class='photo'>
			<div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
			<div class='photo-name'>Name</div>
		</div>
		<div class='photo'>
			<div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
			<div class='photo-name'>Name</div>
		</div>
		<div class='photo'>
			<div class='image'><a href='#'><img src='https://i.imgur.com/PC68FSTb.jpg' alt='profile picture' width='300' height='300'></a></div>
			<div class='photo-name'>Name</div>
		</div>
	</div>
	<!-- end content -->

＆＃13;

＆＃13;

＆＃13;

更新后的JsFiddle：https://jsfiddle.net/h3x2ooax/3/

Answer 3

您必须将position: relative;设置为.photo元素。

并将position: absolute;和bottom: 0;设置为照片的名称元素

您可以更改属性bottom以增加或减少到图像底部的距离

https://jsfiddle.net/v4j0a628/