css背景图

最新推荐文章于 2024-08-25 09:57:22 发布

weifeng_bushileng

最新推荐文章于 2024-08-25 09:57:22 发布

阅读量107

点赞数

分类专栏： web 文章标签：前端开发语言 web

本文链接：https://blog.csdn.net/qq_43733682/article/details/123306216

版权

web 专栏收录该内容

12 篇文章 0 订阅

订阅专栏

这段代码展示了一个使用HTML和CSS创建的背景设计，背景图片来自《微博Banner.jpg》，设置了背景大小为cover。主要内容区域包含一个绝对定位的-au-部分，用于放置标题和统计数据，标题为'#一直单身但颜值超高的人#'，下方显示了1.4万讨论和2443.3万阅读的统计数据。

摘要由CSDN通过智能技术生成

实现效果
在这里插入图片描述

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <title>背景</title>
     <style>
     .main {
         width: 600px;
         height: 300px;
         background-image: url(https://document.youkeda.com/P3-1-HTML-CSS/1.9/weibo-banner.jpg);
         background-size: cover;
         position: relative;
     }

     .au {
         position: absolute;
         left: 0;
         bottom: 0;
         right: 0;
         height: 60px;
         padding-left: 10px;
         background: linear-gradient(to bottom, rgba(0,0,0,0),rgba(0,0,0,0.9));
     }

     .title {
         font-size: 18px;
         font-weight: 700;
         line-height: 20px;
         color: #FFF;
         margin-top: 10px;
     }
     .b {
         font-size: 12px;
         line-height: 20px;
         color: #FFF;
         margin-top: 4px;
     }
    .discuss {
        margin-right: 20px;
    }


     </style>
 </head>
 <div class="main">

    <div class="au">

   <div class="title">#一直单身但颜值超高的人#</div>
   

       <div class="b">
           <span class="discuss">1.4万讨论</span>
           <span class="read">2443.3万阅读</span>
       </div>

    
    </div>
</div>
 </body>
 </html>

weifeng_bushileng

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
css背景图

实现效果 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <title>背景</title> <style> .main { width: 600px;
复制链接

扫一扫