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

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

  • 相关阅读:
    http协议get方式获取图片
    listview全选,和反选的实现
    猜红桃A游戏
    java虚拟机的类加载器
    正则表达式基本用法
    echarts饼图配置模板
    spring----bean的使用
    mysql特殊查询----分组后排序
    java程序存入数据库中文乱码解决方案
    echarts功能配置实例----柱/折线、饼图
  • 原文地址:https://www.cnblogs.com/tu-0718/p/10595429.html
Copyright © 2011-2022 走看看