完美实现文字置于图片之上且背景半透明

时间:2023-02-10 来源:网络收集作者:秩名浏览: 次推荐打印

之前发过一篇关于将图片的说明文字显示在图片之上且背景半透明效果的文章，讲述了如何将文字置于图片之上且背景半透明，但那个解决办法会出现一个问题，就是背景虽然半透明了，但文字也会半透明，今天发现百度旅游上的实现方法，很完美地实现这个功能，现把代码共享如下：

复制代码代码如下:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml"> 

<head> 

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 

<title>文字置于图片之上且背景半透明 趣搜源码www.qusoym.com</title> 

<style> 

a.title { color:#D3D3D4; background-color:rgba(0,0,0,0.6); 

filter:progid:DXImageTransform.Microsoft.Gradient(GradientType=0, StartColorStr='#A0000000', EndColorStr='#A0000000'); 

padding: 12px 24px; 

position: absolute; 

top: 228px; 

left:0; 

width: auto; 

text-decoration: none; 

font: 16px Microsoft YaHei, Verdana; 

color:#fff; 

</style> 

</head> 

<body> 

<p style=" position:relative; width:1280px;"> 

<img src="/upload/2022-04/27/081923_6a63f6246b600c33fcca25821a4c510fd8f9a1cd.jpg" width="1280" height="960" /> 

<a class="title" href="#">网站模板下载</a> 

</p> 

</body> 

</html>

(责任编辑：趣搜源码)

转载请注明来源：http://www.qusoym.com/jsjc/6442.html

上一篇：pbootcms的文章标题和摘要字数如何限制？
下一篇：网站更换模板，内容不变，对优化有影响吗？

本文标签：

网站源代码二开的优化方法分享

网站更换模板，内容不变，对优化有影响吗？

pbootcms的文章标题和摘要字数如何限制？

pbootcms搭建使用教程

帝国cms实现随机缩略图方法

帝国CMS后台搜索报错Illegal mix of collations for operati

月老在线牵盲盒/交友盲盒/盲盒交友匹配/趣味交友微擎详细图

帝国CMS二次开发织梦CMS数据转换帝国CMS教程

说点什么吧

全部评论（0）
最新最早

还没有评论，快来抢沙发吧！

郑重声明：
本站所有内容均由互联网收集整理、网友上传，并且以计算机技术研究交流为目的，仅供大家参考、学习，不存在任何商业目的与商业用途。若您需要商业运营或用于其他商业活动，请您购买正版授权并合法使用。
我们不承担任何技术及版权问题，且不对任何资源负法律责任。
如无法下载，联系站长索要。
如有侵犯您的版权，请及时联系我们，我们尽快处理。

最新文章

推荐文章

热门排行