图片阴影显示文字
这个是效果
这个是在一个项目上摘取的
html
< html > < title >阴影显示图片文字</ title > < link href="style.css" rel="stylesheet" type="text/css" /> < body > < ul > < li class="a1"> < img src="2jpg.jpg" alt="少女物语--梦瑶." /> < a title="少女物语--梦瑶." href="#">< strong >少女物语--梦瑶.</ strong > < br > < span >我一生渴望把你收藏好,妥善安放…</ span > < br > 查看详情 </ a > < i class="absbg"></ i > </ li > </ ul > </ body > </ html > |
这个是css
li{ list-style-type : none ;} ul li.a 1 { left : 0px ; top : 0px ; width : 640px ; height : 292px ; overflow : hidden ; position : relative ; } ul li .absbg{ position : absolute ; left : 0px ; top : 0px ; width : 640px ; height : 292px ; background : #000 ; filter:alpha(opacity= 50 ); opacity: 0.5 ; display : none ; } ul li.a 1 .absbg{ width : 640px ; height : 292px ;} ul li a{ position : absolute ; padding : 10px ; font-size : 12px ; width : 90px ; height : 90px ; overflow : hidden ; left : 0px ; top : 0px ; color : #fff ; font-family : 'Microsoft YaHei' ; z-index : 2 ; display : none ; } ul li:hover a{ display : block ; text-decoration : none ; } ul li:hover .absbg{ display : block ; } ul li a strong{ line-height : 2em ; } ul li.a 1 a{ padding : 45px 20px 15px 30px ; font-size : 18px ; width : 216px ; height : 284px ; overflow : hidden ; } |
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步