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属性直接引入图片,然后用定位实现
第二种:用背景图的方式且不使用定位实现(推荐第二种,有时定位用多了也不是一件好事,毕竟会脱离文档流)
2种不同方式实现背景图里加入文字的简单CSS样式的更多相关文章
- Action的三种实现方式,struts.xml配置的详细解释及其简单执行过程(二)
勿以恶小而为之,勿以善小而不为--------------------------刘备 劝诸君,多行善事积福报,莫作恶 上一章简单介绍了Struts2的'两个蝴蝶飞,你好' (一),如果没有看过,请观 ...
- 携程移动端案列(flex布局、背景图缩放,文字阴影)
效果图如下: <body> <div class="nav"> <div class="row"> <div clas ...
- css用背景图来替换文字来达到隐藏文字的目的
根据html代码的不同来分成两大类方法,如下 html代码: <h1 class="replace-indent">hello see</h1> 第一种方法 ...
- 前端切图:一个好看的表格css样式
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> ...
- CSS实现背景图尺寸不随浏览器大小而变化的两种方法
一些网站的首页背景图尺寸不随浏览器缩放而变化,本例使用CSS 实现背景图尺寸不随浏览器缩放而变化,方法一. 把图片作为background,方法二使用img标签.喜欢的朋友可以看看 一些网站的首页 ...
- 全屏背景图的实现及background的相关属性
今天需要做一个占满设备宽度的轮播图,这里作为demo仅展示一张图,下面分别是要操作的图片(这里做了缩放处理,实际的图比较大),以及要实现的效果图,很明显两者是不成比例的: (图一) ...
- CSS 实现背景图尺寸不随浏览器缩放而变化
<!-- Author:博客园小dee --> 一些网站的首页背景图尺寸不随浏览器缩放而变化,例如百度个人版的首页,缩放后背景图的尺寸并不改变: 再比如花瓣网( http://www.hu ...
- CSS之全屏背景图
吐槽啦:Yeah 明天就是国庆了o(* ̄▽ ̄*)o!哈哈,提前祝福各位园友国庆快乐.假期愉快.生活美满.天天开心!国庆我要回家一趟,把一些不用的东西带回家,走访一下亲朋好友,在家打几天酱油~~~ 言 ...
- Lodop打印控件不打印css背景图怎么办
background:url()这是css背景图,http协议会按异步方式下载背景图,所以很容易等不到下载完毕就开始打印了,故lodop不打印css背景图.Lodop不打印css背景图,但是有其他方法 ...
随机推荐
- SpringBoot jar 注册windows服务
1.pom.xml中添加 <plugin> <groupId>cn.joylau.code</groupId> <artifactId>joylau-s ...
- 末学者笔记--SSHD服务及SCP用法
sshd服务讲解 1.SSHD服务 介绍:SSH 协议:安全外壳协议.为 Secure Shell 的缩写.SSH 为建立在应用层和传输层基础上的安全协议. 默认端口22 作用: sshd服务使用SS ...
- windows使用pyecharts报错 No module named 'pyecharts_snapshot
下载此文件后,使用命令 pip install pyecharts_snapshot-0.1.8-py2.py3-none-any.whl 安装完成即可 链接地址:https://pypi.org/p ...
- So, How About UMD模块-Universal Module Definition
在ES6模块解决方案出现之前,工具库或包常用三种解决方案提供对外使用的接口,最早是直接暴露给全局变量,比如我们熟知的Jquery暴露的全局变量是$,Lodash对外暴露的全局变量是_,后来出现了AMD ...
- 异步简析之BlockingCollection实现生产消费模式
目前市面上有诸多的产品实现队列功能,比如Redis.MemCache等... 其实c#中也有一个基础的集合类专门用来实现生产/消费模式 (生产模式还是建议使用Redis等产品) 下面是官方的一些资料和 ...
- 记录NPOI使用方法
DLL 下载地址:https://files.cnblogs.com/files/xujunbao/NPOI.rar using NPOI.HSSF.UserModel; using NPOI.SS. ...
- 第一章 Java概述
1.JAVA分类 JAVA SE:基础核心(面向对象.API.JVM...) JAVA ME:(游戏.通讯开发) JAVA EE(JSP/Sevlet\EJB\服务开发.企业应用) 2.JAVA语 ...
- ConcurrentHashmap详解以及在JDK1.8的更新
因为hashmap本身是非线程安全的,如果多线程对hashmap进行put操作的话,就会导致死循环等现象.ConcurrentHashMap主要就是为了应对hashmap在并发环境下不安全而诞生的,C ...
- 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/ ...
- shell 命令 使用
[root@ken ~]# cat ken.sh http://www.baidu.com http://www.baidu.com http://www.sina.com http://www.si ...