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属性直接引入图片,然后用定位实现

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

  • 相关阅读:
    广度优先搜索
    洛谷 P1126 机器人搬重物
    codevs 1058 合唱队形
    洛谷P1216 [USACO1.5]数字三角形 Number Triangles
    Codevs 1576 最长严格上升子序列
    跳马(Knight Moves), ZOJ1091, POJ2243
    洛谷 P1644 跳马问题
    NOI 2971 抓住那头牛
    NOI 2727 仙岛求药
    搜索与回溯算法
  • 原文地址:https://www.cnblogs.com/tu-0718/p/10595429.html
Copyright © 2011-2022 走看看