图片底部遮罩层和文字描述DEMO【CSS样式】

57 阅读 0 评论 38 点赞

我是靠谱客的博主哭泣河马，最近开发中收集的这篇文章主要介绍图片底部遮罩层和文字描述DEMO【CSS样式】，觉得挺不错的，现在分享给大家，希望可以做个参考。

概述

两个DEMO

一、效果图：

代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>XXXX</title>
   </head>
   <body>
       <div style="width:500px;height:300px;position: relative;">
           <div style="width:500px;height:300px;overflow: hidden;">
               <img src="../../public/images/yuantiao.jpg"/>
           </div>
       <div style="background: #000;opacity: 0.6;color:#fff;
           width: 100%;height:60px;position: absolute;bottom: 0px;left: 0px;">
           ssssssssssssssssssssss
       </div>
       </div>
   </body>
</html>

二、效果图：

代码：

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title>乘客公告</title>
       <style>
           .class_outer {
               display: block;
               width: 550px;
               height: 276px;
               margin: 10px auto;
               position: relative;
               overflow: hidden;
           }
           .class_cover {
               width: 100%;
               height: 50px;
               line-height: 50px;
               padding-left: 5px;
               background-color: rgba(0, 0, 0, .50);
               color: #FFFFFF;
               font-size: 26px;
               position: absolute;
               left: 0px;
               bottom: 0px;
           }
       </style>
   </head>
   <body>
       <a href="#" class="class_outer">
           <img src="../../public/images/yuantiao.jpg" width="550px" height="276px" border="0" />
           <span class="class_cover">大鱼海棠，不止关于爱情。</span>
       </a>