使用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(知识 ...
随机推荐
- 【HANA系列】SAP HANA Studio出现"Fetching Children..."问题
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP HANA Studio出 ...
- 书籍：wpf学习书籍介绍
WPF参考书推荐 下面先整理下,本人主要学习的WPF参考书: 1.WPF编程宝典(C#2010) 该书:(必读) 心得体会:读完该书后,你对WPF的基础和基本控件的使用,包括WPF的编程模型,相比Wi ...
- c++ 加载库错误问题解决
转载自:http://blog.csdn.net/sahusoft/article/details/7388617 一般我们在Linux下执行某些外部程序的时候可能会提示找不到共享库的错误, 比如: ...
- Nginx代理自动上线下线
Nginx基于连接探测,如果发现后端异常,在单位周期为fail_timeout设置的时间,中达到max_fails次数,这个周期次数内,如果后端同一个节点不可用,那么接将把节点标记为不可用,并等待下一 ...
- [Git] 026 config 命令的补充
少废话,上例子 1. 让命令更醒目 $ git config --global color.ui true 2. 偷懒 $ git config --global alias.st status 使用 ...
- java基础笔记（2）
java中成员变量是有默认初始值的,而局部变量是没有的: 构造方法名和类名相同,没有返回值,即结构如下:public 构造方法名(): 实例化类的本质就是调用了类的构造方法: 如果自定义了构造方法,就 ...
- 逆向工程 生成mapper 接口的 重要方法
@Test public void testSelectByExample() { ItemsExample itemsExample = new ItemsExample(); ItemsExamp ...
- linux安装mysql8(完整图文笔记)
基本命令 安装 : yum install mysql-community-server 启动 : service mysqld start/restart 停止 : service mysqld s ...
- gradle上sourceSets配置&同名文件合并问题
gradle的sourceSets可以对不同的buildType, productFlavor,buildVariant设置不同的文件路径,进行多样化处理. sourceSets{ main{ man ...
- 华为设备acl配置
拓扑图: 需求: 1.-vlan10内所有的主机,只能通过http访问vlan30-server的服务器;不能访问vlan40-server服务器2.-vlan20-pc1主机,可以访问vlan40- ...