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

  

  

  我总结了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. JIRA API 对接

    系统要跟JIRA对接,将本系统数据发送给jira. 开始一头雾水怎么让数据传过去已什么形式存在,是存数据库呢还是怎么显示呢.研究半天发现其实只要将原数据作为json数据提供给jira接口,jira接口 ...

  2. centos修改SSH端口并禁用root远程登录

    1.使用 root 用户执行以下步骤:只在 CentOS 6.5 下验证. 2.先查看下服务器端口号范围: # sysctl -a|grep ip_local_port_range 3.修改端口 vi ...

  3. 论文阅读笔记五十二:CornerNet-Lite: Efficient Keypoint Based Object Detection(CVPR2019)

    论文原址:https://arxiv.org/pdf/1904.08900.pdf github:https://github.com/princeton-vl/CornerNet-Lite 摘要 基 ...

  4. 论文阅读笔记四十八:Bounding Box Regression with Uncertainty for Accurate Object Detection(CVPR2019)

    论文原址:https://arxiv.org/pdf/1809.08545.pdf github:https://github.com/yihui-he/KL-Loss 摘要 大规模的目标检测数据集在 ...

  5. 使用Python批量下载Plus上的Podcast

    Plus是一个介绍数学之美与实际应用的网络杂志,其中包含了数学知识.轶闻趣事.历史典故等许多精彩的内容.该杂志恰好有一个Podcast栏目,提供了不少采访与讲座的mp3音频.于是, 我使用Python ...

  6. python设计模式---结构型之代理模式

    主要想着nginx:) from abc import ABCMeta, abstractmethod # 结构型设计模式---代理模式 class Actor: def __init__(self) ...

  7. Java练习1

    1.编写一个计算图形面积的程序,程序应当能够计算并输出矩形.圆的面积.考虑到程序的未来扩展,设计一个接口ShapeInterface,在此基础上设计实现类Rectangle(矩形类)和Circle(圆 ...

  8. Jquery DataTable初探

    最近在做公司的后台模版,表格渲染都是用的datatable,现在来总结一下常用用法. datatable中文网参考链接 配置介绍 1. "aLengthMenu": [ [5, 1 ...

  9. c语言博客作业--结构体&文件

    1.本章学习总结 1.1思维导图 1.2.本章学习体会 本章学到了结构体如何构建,用typedef进行重定义结构体,结构指针,访问结构体的方式等. 文件:文件的读取,文件读写的几个函数,基本了解了文本 ...

  10. 京东B2B业务架构演变

    京东 B2B 业务的定位是让各类型的企业都可以在京东的 B 平台上进行采购.建立采购关系. 京东 B2B 的用户群体主要分为 2 类,一类是大 B 用户.另一类是小 B 用户.比如联通.移动公司跟京东 ...