使用HTML和CSS来实现为文字设置图片底纹
先看一下最终实现的效果
图中的hello是文本而不是图片
那么如何实现这种效果呢？
HTML部分：
创建一个h1标签 ，标签内容为（hello）。通过link标签链接外部样式表style.css。
style.css部分：
1、主体body部分的统一样式设置：
消除主体部分margin和padding的默认值；设置字体为黑体；背景为#000（黑色）。
2、设置h1的样式：
- 设置文本字号为200px；
- 定义文本中仅有大写字母（uppercase）；粗细为900；字母间距1px；
- position & transform: translate(-50%, -50%) 实现块元素百分比下居中；
- 背景图片路径为1.jpg；图片水平比例50%，垂直比例50%;
- 保持图片的纵横比，并将图像缩放成完全覆盖背景区域的最小大小。
- 指定文字的填充颜色，transparent透明；（使用-webkit-前缀）
- 指定背景绘制在text区域内，剪切成文字形状；（使用-webkit-前缀）
实现代码
HTML部分：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Awesome Text Effect</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>hello</h1>
</body>
</html>
CSS部分：
body{
margin:0px;
padding:0px;
font-family:"黑体";
background:#000;
}
h1{
font-size: 200px;
text-transform:uppercase;
/*定义文本中的大小写，uppercase仅有大写字母 */
font-weight:;
/*定义文本的粗细，从100~900*/
letter-spacing:1px;
/*设置字母间距*/
position:absolute;
top:50%;
left:50%;
transform: translate(-50%, -50%);
/*position & transform: translate(-50%, -50%)
实现块元素百分比下居中*/
margin:;
background:url(1.jpg) 50% 50%;
/*背景图片路径和size大小*/
background-size: cover;
/*此时会保持图像的纵横比*/
/*并将图像缩放成将完全覆盖背景定位区域的最小大小。*/
-webkit-text-fill-color:transparent;
/*text-fill-color是设置指定文字的填充颜色，transparent透明*/
-webkit-background-clip: text;
/*背景绘制在text区域内，剪切成文字形状*/
}
使用HTML和CSS来实现为文字设置图片底纹的更多相关文章
- 用 CSS 让你的文字更有文艺范
透明文字,模糊文字,镂空文字,渐变文字,图片背景文字,用 CSS 让你的文字也有 freestyle- 前言 我们做页面涉及字体的时候,最多就是换个 color 换个 font-family,总是觉得 ...
- div+css使多行文字垂直居中?
1.单行文字: 设置height = line-height; 多行文字: 设置 padding, 自己要计算一下? vertical-align: 可以设置垂直居中, 但是只是针对本身就具有 ali ...
- css+div如何解决文字溢出
看到标题你一定很轻易就会想到截断文字加“...”的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下,一般用div+cs ...
- div+css（ul li）实现图片上文字下列表布局
css样式表代码: html布局代码: 效果图: html布局部分,可根据自己需要添加对应的div即可. 1.CSS关键样式单词解释 1).ul.imglist{ margin:0 auto; wid ...
- CSS实现文字和图片的水平垂直居中
关于文字和图片的水平垂直居中,在前端界绝对算是一个老生常谈的问题了,尤其是垂直居中,什么千奇百怪的解法都能想的出来.下面我就总结一些比较常用的方法: 一.文本的水平垂直居中: 1.水平居中: 是不是很 ...
- 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕（残缺）
原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...
- 不同CSS布局实现与文字鼠标选择的可用性——张鑫旭
by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2401 一.文字选择的 ...
- css文字环绕图片--遇到的问题及解决方法
一.前言 需要实现一个文字环绕图片的效果,心想so easy嘛. 1)代码部分 <style> .img-left { border: 3px solid #005588; width:3 ...
- 这些HTML、CSS知识点，面试和平时开发都需要 No5-No7（知识点：文字设置、设置背景、数据列表）
系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...
随机推荐
- REST API (四)之Generic views
通用的视图 Django’s generic views... were developed as a shortcut for common usage patterns... 它们采取一些常见的习 ...
- 2018.03.27 pandas concat 和 combin_first使用
# 连接和修补concat.combine_first 沿轴的堆叠连接 # 连接concatimport pandas as pdimport numpy as np s1 = pd.Series([ ...
- 【ABAP系列】SAP ABAP 实现FTP的文件上传与下载
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP 实现FTP的文 ...
- java 内部编译异常的处理方法
1.可能存在的问题. 在cmd 输入 java -version 和javac -version 检验java的环境是否正常,不正常就卸载重装. 搞定!
- itchat监听微信撤回消息
import itchat from itchat.content import * import re msg_infomation = {} # 监听发送消息 @itchat.msg_regist ...
- Dubbo原理学习
Dubbo源码及原理学习 阿里中间件团队博客 Dubbo官网 Dubbo源码解析 Dubbo源码解析-掘金 Dubbo源码解析-赵计刚 Dubbo系列 源码总结+最近感悟
- CentOS7 NAT配置
环境说明:Cloud1中的GE0/0/1.GE0/0/3.GE0/0/5接口,分别与Centos7中的eth1.eth2.eth3接口桥接到同一虚拟网卡,R1,R2,R3均配置一条静态默认路由指向Ce ...
- hive数据去重
Hive是基于Hadoop的一个数据仓库工具,可以将结构化的数据文件映射为一张数据库表,并提供类SQL查询功能 hive的元数据存储:通常是存储在关系数据库如 mysql(推荐) , derby(内嵌 ...
- nginx重新编译安装upload模块
由于php处理上传会出现超时,并且显示上传进度官方php不支持nginx+php,所以决定让nginx自己处理上传,我本地环境是mac上已经安装过nginx1.8.0,安装方式为brew,所以需要重新 ...
- Linux文档整理之【Mysql安装与配置】
最近公司让整理一个Linux安装Mysql的文档.所以就整理了一下,这里将自己整理的详细文档做个笔记. 1.下载Mysql. https://dev.mysql.com/downloads/mysql ...