先看一下最终实现的效果

图中的hello是文本而不是图片


那么如何实现这种效果呢?

HTML部分:

创建一个h1标签 ,标签内容为(hello)。通过link标签链接外部样式表style.css。

style.css部分:

1、主体body部分的统一样式设置:

消除主体部分margin和padding的默认值;设置字体为黑体;背景为#000(黑色)。

2、设置h1的样式:

  1. 设置文本字号为200px;
  2. 定义文本中仅有大写字母(uppercase);粗细为900;字母间距1px;
  3. position & transform: translate(-50%, -50%) 实现块元素百分比下居中;
  4. 背景图片路径为1.jpg;图片水平比例50%,垂直比例50%;
  5. 保持图片的纵横比,并将图像缩放成完全覆盖背景区域的最小大小。
  6. 指定文字的填充颜色,transparent透明;(使用-webkit-前缀)
  7. 指定背景绘制在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来实现为文字设置图片底纹的更多相关文章

  1. 用 CSS 让你的文字更有文艺范

    透明文字,模糊文字,镂空文字,渐变文字,图片背景文字,用 CSS 让你的文字也有 freestyle- 前言 我们做页面涉及字体的时候,最多就是换个 color 换个 font-family,总是觉得 ...

  2. div+css使多行文字垂直居中?

    1.单行文字: 设置height = line-height; 多行文字: 设置 padding, 自己要计算一下? vertical-align: 可以设置垂直居中, 但是只是针对本身就具有 ali ...

  3. css+div如何解决文字溢出

    看到标题你一定很轻易就会想到截断文字加“...”的做法.哈哈,就是这样.其实写这篇日志也只是把这样方法做个记录,因为似乎还有很多人不记得碰到这样的情况该如何处理. 首先,先解释一下,一般用div+cs ...

  4. div+css(ul li)实现图片上文字下列表布局

    css样式表代码: html布局代码: 效果图: html布局部分,可根据自己需要添加对应的div即可. 1.CSS关键样式单词解释 1).ul.imglist{ margin:0 auto; wid ...

  5. CSS实现文字和图片的水平垂直居中

    关于文字和图片的水平垂直居中,在前端界绝对算是一个老生常谈的问题了,尤其是垂直居中,什么千奇百怪的解法都能想的出来.下面我就总结一些比较常用的方法: 一.文本的水平垂直居中: 1.水平居中: 是不是很 ...

  6. 1.纯 CSS 创作一个按钮文字滑动特效 + 弹幕(残缺)

    原文地址:1# 视频演示如何用纯 CSS 创作一个按钮文字滑动特效 扩展后地址:https://scrimba.com/c/cJkzMfd HTML代码: <html> <head& ...

  7. 不同CSS布局实现与文字鼠标选择的可用性——张鑫旭

    by zhangxinxu from http://www.zhangxinxu.com本文地址:http://www.zhangxinxu.com/wordpress/?p=2401 一.文字选择的 ...

  8. css文字环绕图片--遇到的问题及解决方法

    一.前言 需要实现一个文字环绕图片的效果,心想so easy嘛. 1)代码部分 <style> .img-left { border: 3px solid #005588; width:3 ...

  9. 这些HTML、CSS知识点,面试和平时开发都需要 No5-No7(知识点:文字设置、设置背景、数据列表)

    系列知识点汇总 这些HTML.CSS知识点,面试和平时开发都需要 No1-No4(知识点:HTML.CSS.盒子模型.内容布局) 这些HTML.CSS知识点,面试和平时开发都需要 No5-No7(知识 ...

随机推荐

  1. 批处理文件将多台连接的手机安装同一个APP

    :adb devices > C:\Users\aaminaxu\Desktop\a.txt :1.首先获取连接到电脑的手机的设备信息将其保存到C盘的a.txt文件中::2.将保存的txt文件中 ...

  2. python每日一练:0012题

    第 0012 题: 敏感词文本文件 filtered_words.txt,里面的内容 和 0011题一样,当用户输入敏感词语,则用 星号 * 替换,例如当用户输入「北京是个好城市」,则变成「**是个好 ...

  3. Mac021--编辑软件

    一.思维导图MindNode 知乎Mac常用的思维导图:https://zhuanlan.zhihu.com/p/37768277 MindNode下载地址:https://macblcom.ctfi ...

  4. Linux 项目上线流程

    命令行样式修改 1 打开配置文件vim /etc/bashrc2 添加配置信息PS1="\[\e[37;40m\][\[\e[32;1m\]\u\[\e[37;40m\]@\h \[\e[3 ...

  5. fastjson @JSONField

    此文来源于:https://blog.51cto.com/xiaok007/2164029 1.作用在FIELD(成员变量上) 注意:1.若属性是私有的,必须有set*方法.否则无法反序列化. pac ...

  6. 第九周课程总结&实验报告7

    实验任务详情: 完成火车站售票程序的模拟.要求:(1)总票数1000张:(2)10个窗口同时开始卖票:(3)卖票过程延时1秒钟:(4)不能出现一票多卖或卖出负数号票的情况. 实验代码: package ...

  7. 一个实用的iptables脚本(各种过滤写法参考)

    #!/bin/shmodprobe ipt_MASQUERADEmodprobe ip_conntrack_ftpmodprobe ip_nat_ftpiptables -Fiptables -t n ...

  8. CentOS7 NAT配置

    环境说明:Cloud1中的GE0/0/1.GE0/0/3.GE0/0/5接口,分别与Centos7中的eth1.eth2.eth3接口桥接到同一虚拟网卡,R1,R2,R3均配置一条静态默认路由指向Ce ...

  9. 【JZOJ 3918】蛋糕

    题面: 正文: 根据数据\(4\leq R,C\leq 75\)我们大概可以先枚举切横的刀再二分答案. 更具体的: 假设我们已经枚举到这样横切: 再假设我们已经二分到最小的巧克力是\(7\) 康康第一 ...

  10. 基于 Redux + Redux Persist 进行状态管理的 Flutter 应用示例

    好久没在 SegmentFault 写东西,唉,也不知道 是忙还是懒,以后有时间 再慢慢写起来吧,最近开始学点新东西,有的写了,个人博客跟这里同步. 一直都在自己的 React Native 应用中使 ...