您的位置:首页 > DIV CSS模块 > 【 返回上一页

纯div css布局 图片上标题文字背景半透明 文字不透明模块

div css模块之图文布局,文字布局在图片上,而文字标题内容背景是半透明的。div半透明背景文字不透明在图片上布局模块。这里单独和ul li列表两种情况下图文布局模块。特点纯div+css布局,无JS。

css div图片上文字的背景半透明布局模块

一、单独图文布局半透明案例模块说明

单独图文布局,图片上布局有文字内容,而文字内容背景是半透明,可以看见半透明后的内容图片,文字却不受半透明影响。

1、CSS代码

.onlyimg{ position:relative;height:239px; width:378px}
.onlyimg img{ position:absolute; left:0; top:0;height:239px; width:378px}
.onlyimg h3{ position:absolute; left:0;bottom:0;background-color:rgba(0,0,0,.2); color:#FFF; width:378px;height:36px; line-height:36px; font-weight:bold}

2、HTML代码:

<div class="onlyimg">
<a href="#"><img src="images/2.jpg"><h3>thinkcss标题背景在图片上半透明</h3></a>
</div>

3、效果截图

效果

4、模块说明

采用了position定位属性,将装文字的h3标签定位在图片下边对齐处,同时采用设置h3背景颜色,同时设置背景颜色透明度为0.2,由此得到半透明背景效果布局。

background-color:rgba(0,0,0,.2)

0 ,0 ,0这三个零代表是纯黑色RGB值,可以在PS软件里,RGB分别是0 0 0代表黑色。

ps拾色器 RGB获得对应颜色
ps拾色器 RGB获得对应颜色

可以看见PS软件,拾色器把R G B分别输入0 0 0,得到黑色#000000

兼容主流浏览器!

二、图文列表的图片上文字内容背景半透明

1、说明

这里与上一个单独布局具有复杂一点,多了ul li列表标签使用,使用ul li列表布局出图文列表,而实现背景半透明,文字不透明不受透明影响,依然是使用background-color:rgba(0,0,0,.2)实现。

同时也是使用position定位属性将文字内容定位在图片内容上。

2、对应DIV CSS模块CSS代码

.onlyimg{ position:relative;height:239px; width:378px}
.onlyimg img{ position:absolute; left:0; top:0;height:239px; width:378px}
.onlyimg h3{ position:absolute; left:0;bottom:0;background-color:rgba(0,0,0,.2); color:#FFF; width:378px;height:36px; line-height:36px; font-weight:bold}

ul.imgli{ width:796px; overflow:hidden}
ul.imgli li{ padding:20px 10px; float:left; width:378px; height:239px}
ul.imgli li div{position:relative;width:378px; height:239px}
ul.imgli li div img{ position:absolute; left:0; top:0;height:239px; width:378px}
ul.imgli li div h3{ position:absolute; left:0;bottom:0;background:rgba(0,0,0,.4);color:#FFF;
width:378px;height:36px; line-height:36px; font-weight:bold}
ul.imgli li div a:hover h3{background-color:rgba(0,0,0,.2); height:72px; line-height:36px}

这里为了兼容使用thinkcss初始化模块,所以以上CSS代码只是此示例模块的CSS代码,更多CSS代码,可下载本CSS模块参考完整CSS。

3、html代码

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>图片上标题背景半透明css布局 - www.ThinkCSS.com </title>
<link rel="stylesheet" href="images/style.css" />
<!-- www.thinkcss.com DIV+CSS技术学习和资源分享平台 -->
</head>
<body> <div class="onlyimg">
<a href="https://www.thinkcss.com/mokuai/1377.shtml"><img src="images/2.jpg"><h3>thinkcss标题背景在图片上半透明</h3></a>
</div>
<ul class="imgli">
<li><div>
<a href="#"><img src="images/3.jpg"><h3>标题背景在图片上半透明</h3></a>
</div></li>
<li><div>
<a href="https://www.thinkcss.com/mokuai/1377.shtml"><img src="images/2.jpg"><h3>标题背景在图片上半透明</h3></a>
</div></li>
<li><div>
<a href="#"><img src="images/2.jpg"><h3>标题背景半透明</h3></a>
</div></li>
<li><div>
<a href="#"><img src="images/3.jpg"><h3>文字背景半透明在图片上</h3></a>
</div></li>
</ul>
</body>
</html>

4、截图

文字背景半透明,布局中图片上
文字背景半透明,布局中图片上的ul li图文列表

此thinkcss原创模块图片素材+HTML文件+CSS文件在线演示与打包下载:

1、在线演示

查看案例

2、打包下载

相关标签: 半透明 图文布局
如需转载,请注明文章出处和来源网址:https://www.thinkcss.com/mokuai/1377.shtml

日期:2017-07-13 17:29 css学习与资料网 thinkcss原创