html图片下边显示文字

最新推荐文章于 2024-07-01 18:40:50 发布

Carry-Lee

最新推荐文章于 2024-07-01 18:40:50 发布

阅读量3.7w

点赞数 5

分类专栏： php 文章标签： html

本文链接：https://blog.csdn.net/qq604598861/article/details/50365375

版权

php 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

.imgnews-item{position: relative;}
.imgnews-item span {
	background-color: #000;
	opacity: 0.4;
	filter: alpha(opacity=40);
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 26px;
	line-height: 26px;
	overflow: hidden;
	font-size: 14px;
	text-align: center;
}
.imgnews-item em {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 26px;
	line-height: 26px;
	overflow: hidden;
	font-size: 14px;
	text-align: center;
	color:#FFF;font-style: normal;
}

<li class="imgnews-item">
<img src="" />
<span></span>
<em>图片下边文字</em>
</a>
</li>

ie7

.pos-abs {
    position: absolute;
}
.slider-main-img p {
    z-index: 1;
    left: 0px;
    line-height: 30px;
    font-weight: bold;
    top: 240px;
    height: 30px;
    width: 100%;
    font-size: 14px;
    text-indent: 9px;
    background: rgba(0, 0, 0, 0.5);
	background:#000\9;
	text-align:center;
}
.slider-main-img{float:left;position:relative;z-index:1;height:100%;}
.slider-main-img a,.slider-main-img a:visited{color:#ececec;}
.slider-main-img a:hover{color:#fff;}

<div style="zoom: 1; height: 270px; position: relative; overflow: hidden;">
	<div class="slider-main-img" data-module-name="c_fimg_t_0" style="zoom: 1;float: left;">
		<a href="" >
			<img width="380" height="270" src="图片地址" >
			<p class="pos-abs">文字</p>
		</a>
	</div>
</div>