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

  

  

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

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

2种不同方式实现背景图里加入文字的简单CSS样式的更多相关文章

  1. Action的三种实现方式,struts.xml配置的详细解释及其简单执行过程(二)

    勿以恶小而为之,勿以善小而不为--------------------------刘备 劝诸君,多行善事积福报,莫作恶 上一章简单介绍了Struts2的'两个蝴蝶飞,你好' (一),如果没有看过,请观 ...

  2. 携程移动端案列(flex布局、背景图缩放,文字阴影)

    效果图如下: <body> <div class="nav"> <div class="row"> <div clas ...

  3. css用背景图来替换文字来达到隐藏文字的目的

    根据html代码的不同来分成两大类方法,如下 html代码: <h1 class="replace-indent">hello see</h1> 第一种方法 ...

  4. 前端切图:一个好看的表格css样式

    <!DOCTYPE html><html>        <head>        <meta charset="UTF-8">  ...

  5. CSS实现背景图尺寸不随浏览器大小而变化的两种方法

    一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看   一些网站的首页 ...

  6. 全屏背景图的实现及background的相关属性

    今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的:      (图一)     ...

  7. CSS 实现背景图尺寸不随浏览器缩放而变化

    <!-- Author:博客园小dee --> 一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变: 再比如花瓣网( http://www.hu ...

  8. CSS之全屏背景图

    吐槽啦:Yeah  明天就是国庆了o(* ̄▽ ̄*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...

  9. Lodop打印控件不打印css背景图怎么办

    background:url()这是css背景图,http协议会按异步方式下载背景图,所以很容易等不到下载完毕就开始打印了,故lodop不打印css背景图.Lodop不打印css背景图,但是有其他方法 ...

随机推荐

  1. SpringBoot jar 注册windows服务

    1.pom.xml中添加 <plugin> <groupId>cn.joylau.code</groupId> <artifactId>joylau-s ...

  2. 末学者笔记--SSHD服务及SCP用法

    sshd服务讲解 1.SSHD服务 介绍:SSH 协议:安全外壳协议.为 Secure Shell 的缩写.SSH 为建立在应用层和传输层基础上的安全协议. 默认端口22 作用: sshd服务使用SS ...

  3. windows使用pyecharts报错 No module named 'pyecharts_snapshot

    下载此文件后,使用命令 pip install pyecharts_snapshot-0.1.8-py2.py3-none-any.whl 安装完成即可 链接地址:https://pypi.org/p ...

  4. So, How About UMD模块-Universal Module Definition

    在ES6模块解决方案出现之前,工具库或包常用三种解决方案提供对外使用的接口,最早是直接暴露给全局变量,比如我们熟知的Jquery暴露的全局变量是$,Lodash对外暴露的全局变量是_,后来出现了AMD ...

  5. 异步简析之BlockingCollection实现生产消费模式

    目前市面上有诸多的产品实现队列功能,比如Redis.MemCache等... 其实c#中也有一个基础的集合类专门用来实现生产/消费模式 (生产模式还是建议使用Redis等产品) 下面是官方的一些资料和 ...

  6. 记录NPOI使用方法

    DLL 下载地址:https://files.cnblogs.com/files/xujunbao/NPOI.rar using NPOI.HSSF.UserModel; using NPOI.SS. ...

  7. 第一章 Java概述

    1.JAVA分类 JAVA SE:基础核心(面向对象.API.JVM...) JAVA ME:(游戏.通讯开发) JAVA EE(JSP/Sevlet\EJB\服务开发.企业应用)   2.JAVA语 ...

  8. ConcurrentHashmap详解以及在JDK1.8的更新

    因为hashmap本身是非线程安全的,如果多线程对hashmap进行put操作的话,就会导致死循环等现象.ConcurrentHashMap主要就是为了应对hashmap在并发环境下不安全而诞生的,C ...

  9. Pytorch: cuda runtime error (59) : device-side assert triggered at /pytorch/aten/src/THC/generic/THCTensorMa

    更换了数据集, 在计算交叉熵损失时出现错误 : cuda runtime error (59) : device-side assert triggered at /pytorch/aten/src/ ...

  10. shell 命令 使用

    [root@ken ~]# cat ken.sh http://www.baidu.com http://www.baidu.com http://www.sina.com http://www.si ...