zoukankan      html  css  js  c++  java
  • 2种不同方式实现背景图里加入文字的简单CSS样式

      如果让你实现下图的样式(图片里面插入文字),你会怎么做呢?

      

      

      我总结了2种方式

        ①:用 img src属性直接引入图片 + 定位

        ②:用背景图且不使用定位

      第一种:

        HTML 

       <div class="download-explain">
                  <img class="download-explain-img" src="../../assets/img/download-bg.png"/>
                  <span class="download-explain-text">下载须知</span>
         </div>

        CSS

        .download-explain-img {
            width: 100%;
        }
    
      .download-explain {
           position: relative; 
         margin: 0 auto;
         margin-top: 26px;
         margin-bottom: 22px;
         width: 46%;
         height: 74px;
         line-height: 74px;
         text-align: center;}
    
      .download-explain-text {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%,-50%);
        color: #fff;
        font-size: 18px;
        font-weight: bold;
       }

      第二种:

        HTML

      <div class="download-explain">
            <span class="download-explain-text">下载须知</span>
        </div>

        CSS

    .download-explain {
        margin: 0 auto;
        margin-top: 26px;
        margin-bottom: 22px;
        width: 46%;
        height: 74px;
        line-height: 74px;
        text-align: center;
        background: url(../../assets/img/download-bg.png) no-repeat;
        background-size: 100% 100%;
        }
    
    .download-explain-text {
        color: #fff;
        font-size: 18px;
        font-weight: bold;
       }

        

      注:2种方式的主要区别在于

        第一种:用 img src属性直接引入图片,然后用定位实现

        第二种:用背景图的方式且不使用定位实现(推荐第二种,有时定位用多了也不是一件好事,毕竟会脱离文档流)

  • 相关阅读:
    ToString 格式化数值
    肾积水
    十月一日
    9月27日 星期六
    080929 气温骤降
    東京の空
    9月26日 星期五
    9月30日 星期二
    粉蓝房子&电影
    080922 雨
  • 原文地址:https://www.cnblogs.com/tu-0718/p/10595429.html
Copyright © 2011-2022 走看看