使用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(知识 ...
随机推荐
- 关于golang select的用法
1 go的信道 1.1 什么是信道 信道可以理解为go协程之间进行通信的通道. 1.2 信道的声明 所有的信道都关联一个类型,一旦关联了类型,该信道就只能传输该类型的数据,传输其它类型的数据的话就是非 ...
- 【扩展事件】跟踪超过3秒的SQL
msdn 扩展事件:点击打开链接 转自:https://blog.csdn.net/yenange/article/details/52592814 -- 删除事件会话 IF EXISTS(SELEC ...
- CentOS7 内核模块管理
1.查看所有模块:lsmod 2.查看指定模块的详细信息:modinfo 模块名 3.动态加载模块:modprobe 模块名 4.动态卸载模块:modprobe -r 模块名 5.开机自动加载模块:假 ...
- 部署CM集群首次运行报错：Formatting the name directories of the current NameNode.
1. 报错提示 Formatting the name directories of the current NameNode. If the name directories are not emp ...
- 使用before和after双伪元素清除浮动
使用方法: .clearfix:before,.clearfix:after { content:"."; display:table; } .clearfix:after { c ...
- tensorflow学习笔记七----------RNN
和神经网络不同的是,RNN中的数据批次之间是有相互联系的.输入的数据需要是要求序列化的. 1.将数据处理成序列化: 2.将一号数据传入到隐藏层进行处理,在传入到RNN中进行处理,RNN产生两个结果,一 ...
- [LeetCode] 108. 将有序数组转换为二叉搜索树
题目链接 : https://leetcode-cn.com/problems/convert-sorted-array-to-binary-search-tree/ 题目描述: 将一个按照升序排列的 ...
- Java——绘制五角星
Java2D支持通过GeneralPath实现绘制任意的几何形状. 步骤:1)实例化GeneralPath对象 2)调用moveTo()方法锚地开始点坐标 3)调用lineTo()或curveTo() ...
- vue+element ui 时间格式化
<el-table-column prop="startTime" label="日期" width="200" align=&quo ...
- Python 自定义三方库
一.注册一个pypi账号 https://pypi.org/ 二.github上创建一个项目 https://github.com/ 三.编写自己的python项目 项目结构(参考):https:// ...