CSS实现让文字半透明显示在图片上的方法 - CSDN文库

170 浏览量更新于2023-03-16 1 收藏 29KB PDF 举报

身份认证购VIP最低享 7 折!

领优惠券(最高得80元）

资源详情

资源推荐

CSS实现让文字半透明显示在图片上的方法实现让文字半透明显示在图片上的方法

主要为大家介绍了CSS实现让文字半透明显示在图片上的方法,实例分析了css使用filter:alpha控制半透明效果的

技巧,需要的朋友可以参考下

本文实例讲述了CSS实现让文字半透明显示在图片上的方法。分享给大家供大家参考。具体实现方法如下：

复制代码

代码如下:

<!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>文字显示在图片上</title>

<style type="text/css">

*{

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:500px;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 class="wrap">

<div class="photo">

<a href="#">

<img src="wall8.jpg" border="0" alt=""/>

<span>标题层叠在图片上，标题文字和背景半透明。鼠标经过边框换色。

</span>

</a></div>

</div>

<div>我们：https://www.jb51.net/</div>

</body>

希望本文所述对大家的web网页设计有所帮助。

本内容试读结束，登录后可阅读更多

下载后可阅读完整内容，剩余0页未读，立即下载

weixin_38518074

粉丝: 6
资源: 927

会员权益专享

图片转文字

全年可省5，000元立即开通

最新资源

资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！点击此处反馈