CSS文字半透明显示图片上的两种效果_html-js-css

概述CSS让一行文字显示在图片的底部，用来说明图片的内容，当作图片标题，标题文字和背景可以设置半透明，鼠标经过图片时边框换色。

下面是内存溢出 jb51.cc 通过网络收集整理的代码片段。内存溢出小编现在分享给大家，也给大家做个参考。

CSS 让一行文字显示在图片的底部，用来说明图片的内容，当作图片标题，标题文字和背景可以设置半透明，鼠标经过图片时边框换色。

代码预览

<head>

<Title>文字显示在图片上</Title>

*{border:none;text-decoration:none}

.wrap{margin:8px;position:relative}

.photo a{position:absolute;display:block;border:1px solID #555555;}

.photo a:hover{border:1px solID #FFFFFF;}

.photo span{wIDth:633px;background:#000;display:block;position:absolute;bottom:0;left:0;color:#fff;filter:Alpha(opacity=50);-moz-opacity:0.6;opacity:0.6;Font:bold 12px/30px Verdana,Arial; text-align:center;cursor:hand;}

.photo a:hover span{text-decoration:underline}

</style>

</head>

<body>

<div >

<img src="https://22vd.oss-cn-shenzhen.aliyuncs.com/wp-content/uploads/2018/09/2018090807180366.png" border="0" alt=""/><span>标题层叠在图片上，标题文字和背景半透明。鼠标经过边框换色。</span></a></div>

</div>

</body>

这个功能可以衍生出很多其他的版本，比如说鼠标滑动的时候才显示介绍文字啊。这个还是很常见的。看看下面的效果。

代码预览

<head>

<Title>文字显示在图片上</Title>

*{border:none;text-decoration:none}

.wrap{margin:8px;position:relative}

.photo a{position:absolute;display:block;border:1px solID #555555;}

.photo a:hover{border:1px solID #FFFFFF;}

.photo a:hover span{text-decoration:underline;display:block;}

</style>

</head>

<body>

<div >

<img src="https://22vd.oss-cn-shenzhen.aliyuncs.com/wp-content/uploads/2018/09/2018090807180366.png" border="0" alt=""/><span>标题层叠在图片上，标题文字和背景半透明但是不显示。鼠标经过边框换色并且显示标题。</span></a></div>

</div>

</body>

大家可以根据自己的需要自己设置效果。

以上是内存溢出(jb51.cc)为你收集整理的全部代码内容，希望文章能够帮你解决所遇到的程序开发问题。如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

总结

以上是内存溢出为你收集整理的CSS文字半透明显示图片上的两种效果全部内容，希望文章能够帮你解决CSS文字半透明显示图片上的两种效果所遇到的程序开发问题。

如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。

欢迎分享，转载请注明来源：内存溢出

原文地址: http://outofmemory.cn/web/1095986.html

CSS文字半透明显示图片上的两种效果

发表评论

评论列表（0条）