使用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(知识 ...
随机推荐
- python-应用OpenCV和Python进行SIFT算法的实现
如下图为进行测试的q和h,分别验证基于BFmatcher.FlannBasedMatcher等的SIFT算法 代码如下: import numpy as np import cv2 from matp ...
- liteide使用中的注意点
liteide使用中的注意点 无法跳转 会出现无法跳转的情况,可能是这个包里面的某个文件会有错误,一般把这个包里的所有的错误都改正之后就能正常跳转了.Ubuntu中,直接按f2可以跳入,之后按住alt ...
- iptables添加开放端口
查看状态 iptables -L -n 编辑/etc/sysconfig/iptables -A INPUT -p tcp -m tcp --dport 4000 -j ACCEPT 重启 servi ...
- laravel框架源码分析（一）自动加载
一.前言 使用php已有好几年,laravel的使用也是有好长时间,但是一直对于框架源码的理解不深,原因很多,归根到底还是php基础不扎实,所以源码看起来也比较吃力.最近有时间,所以开启第5.6遍的框 ...
- “AIIA”杯-国家电网-电力专业领域词汇挖掘
十一之前一直在做“电力领域的词典构建”任务,今天也去聆听了前五支队伍的报告,现结合这段时间来的项目经历,写一下自己的若干心得. 电力领域的词典构建——方法1(非监督学习) 在电力领域词典构建心得1.0 ...
- steps 步骤条、时间轴
steps 步骤条.时间轴:http://www.fxss5201.cn/project/plugin/steps/1.0/ Github地址:https://github.com/fxss5201/ ...
- Linux文件拷贝（6）
本篇介绍文件拷贝操作,主要讲两个命令: 命令 对应英文 作用 tree[目录名] tree 以树状图列出文件目录结构 cp 源文件 目标文件 copy 复制文件或者目录 tree tree命令可以将一 ...
- Nginx 3.使用配置
转 https://www.cnblogs.com/wcwnina/p/9946747.html 本文只针对Nginx在不加载第三方模块的情况能处理哪些事情,由于第三方模块太多所以也介绍不完,当然本文 ...
- 【7.10校内test】T1高级打字机
[题目链接luogu] 这是T1,但是是神仙T1: 对于前100%的数据很好写,直接数组模拟就可以了: (当然也有栈模拟的,据说有模拟炸了的) //50pts#include<bits/stdc ...
- Java中HashSet和HashMap
Set中存储元素为什么不重复(即使hashCode相同)? HashSet中存放自定义类型元素时候,需要重写对象中的hashCode方法和equals方法, HashSet中存放自定义类型元素时候,需 ...