<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>HTML5自定义背景图片的文字特效DEMO演示</title>
<style>
/*! normalize.css v3.0.2 | MIT License | git.io/normalize */html{font-family:sans-serif;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}article,aside,details,figcaption,figure,footer,header,hgroup,main,menu,nav,section,summary{display:block}audio,canvas,progress,video{display:inline-block;vertical-align:baseline}audio:not([controls]){display:none;height:0}[hidden],template{display:none}a{background-color:transparent}a:active,a:hover{outline:0}abbr[title]{border-bottom:1px dotted}b,strong{font-weight:bold}dfn{font-style:italic}h1{font-size:2em;margin:0.67em 0}mark{background:#ff0;color:#000}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sup{top:-0.5em}sub{bottom:-0.25em}img{border:0}svg:not(:root){overflow:hidden}figure{margin:1em 40px}hr{-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box;height:0}pre{overflow:auto}code,kbd,pre,samp{font-family:monospace, monospace;font-size:1em}button,input,optgroup,select,textarea{color:inherit;font:inherit;margin:0}button{overflow:visible}button,select{text-transform:none}button,html input[type="button"],input[type="reset"],input[type="submit"]{-webkit-appearance:button;cursor:pointer}button[disabled],html input[disabled]{cursor:default}button::-moz-focus-inner,input::-moz-focus-inner{border:0;padding:0}input{line-height:normal}input[type="checkbox"],input[type="radio"]{-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;padding:0}input[type="number"]::-webkit-inner-spin-button,input[type="number"]::-webkit-outer-spin-button{height:auto}input[type="search"]{-webkit-appearance:textfield;-moz-box-sizing:content-box;-webkit-box-sizing:content-box;box-sizing:content-box}input[type="search"]::-webkit-search-cancel-button,input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}fieldset{border:1px solid #c0c0c0;margin:0 2px;padding:0.35em 0.625em 0.75em}legend{border:0;padding:0}textarea{overflow:auto}optgroup{font-weight:bold}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}
</style>
<style>
* {
margin: 0;
padding: 0;
}
*,
:before,
:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
html,
body {
min-height: 100%;
}
body {
font-family: 'Oswald', sans-serif;
color: #fff;
background-color: #000;
}
.wrapper {
text-align: center;
}
.title {
font-size: 2em;
position: relative;
margin: 0 auto 1em;
padding: 1em 1em .25em 1em;
text-align: center;
text-transform: uppercase;
}
.title:after {
position: absolute;
top: 100%;
left: 50%;
width: 240px;
height: 4px;
margin-left: -120px;
content: '';
background-color: #fff;
}
/* Clip text element */
.clip-text {
font-size: 6em;
font-weight: bold;
line-height: 1;
position: relative;
display: inline-block;
margin: .25em;
padding: .5em .75em;
text-align: center;
/* Color fallback */
color: #fff;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
.clip-text:before,
.clip-text:after {
position: absolute;
content: '';
}
/* Background */
.clip-text:before {
z-index: -2;
top: 0;
right: 0;
bottom: 0;
left: 0;
background-image: inherit;
}
/* Text Background (black zone) */
.clip-text:after {
position: absolute;
z-index: -1;
top: .125em;
right: .125em;
bottom: .125em;
left: .125em;
background-color: #000;
}
/* Change the background position to display letter when the black zone isn't here */
.clip-text--no-textzone:before {
background-position: -.25em 0;
}
.clip-text--no-textzone:after {
content: none;
}
/* Use Background-size cover for photo background and no-repeat background */
.clip-text--cover,
.clip-text--cover:before {
background-repeat: no-repeat;
-webkit-background-size: cover;
background-size: cover;
}
/* Background image from http://thepatternlibrary.com/ and http://lorempixel.com */
.clip-text_one {
background-image: url(http://i.imgur.com/pJewmf8.jpg);
}
.clip-text_two {
background-image: url(http://i.imgur.com/KCa8KHY.png);
}
.clip-text_tree {
background-image: url(http://i.imgur.com/IuijDCu.png);
}
.clip-text_four {
background-image: url(http://i.imgur.com/tkKlzYz.jpg);
}
.clip-text_five {
background-image: url(http://i.imgur.com/4NiBrXs.gif);
}
.clip-text_six {
background-image: url(http://i.imgur.com/d2awmPs.jpg);
}
.clip-text_seven {
background-image: url(http://i.imgur.com/OzExPUf.png);
}
.clip-text_eight {
background-image: url(http://i.imgur.com/BFlh0FX.jpg);
}
.clip-text_nine {
background-image: url(http://i.imgur.com/2Nrxex6.jpg);
}
.clip-text_ten {
background-image: url(http://i.imgur.com/hCrSRTN.png);
}
.clip-text_eleven {
background-image: url(http://lorempixel.com/480/200/fashion/10/cc);
background-size: cover;
}
.clip-text_twelve {
background-image: url(http://lorempixel.com/480/200/people/7/cc);
}
.clip-text_thirteen {
background-image: url(http://lorempixel.com/480/200/food/5/cc);
}
.clip-text_fourteen {
background-image: url(http://lorempixel.com/480/200/city/9/cc);
}
.clip-text_fifteen {
background-image: url(http://i.imgur.com/kqvmLut.jpg);
}
</style>
<script src="js/prefixfree.min.js"></script>
<script src="js/modernizr.js"></script>
</head>
<body>
<div class="wrapper">
<div style="text-align:center;clear:both;">
<script src="/gg_bd_ad_720x90.js" type="text/javascript"></script>
<script src="/follow.js" type="text/javascript"></script>
</div>
<div class="clip-text clip-text_one">JINTOS</div>
<div class="clip-text clip-text_one clip-text--no-textzone">JINTOS</div>
<div class="clip-text clip-text_twelve clip-text--cover">JINTOS</div>
<div class="clip-text clip-text_two">JINTOS</div>
<div class="clip-text clip-text_fourteen clip-text--cover">JINTOS</div>
<div class="clip-text clip-text_tree">JINTOS</div>
<div class="clip-text clip-text_eleven clip-text--cover">JINTOS</div>
<div class="clip-text clip-text_four">JINTOS</div>
<div class="clip-text clip-text_five">JINTOS</div>
<div class="clip-text clip-text_six">JINTOS</div>
<div class="clip-text clip-text_seven">JINTOS</div>
<div class="clip-text clip-text_eight">JINTOS</div>
<div class="clip-text clip-text_fifteen clip-text--no-textzone">JINTOS</div>
<div class="clip-text clip-text_nine">JINTOS</div>
<div class="clip-text clip-text_ten">JINTOS</div>
<div class="clip-text clip-text_thirteen clip-text--cover">JINTOS</div>
</div>
</body>
</html>
基于HTML5实现的自定义背景图片的文字特效源码.zip
版权申诉
33 浏览量
2022-11-09
22:26:01
上传
评论
收藏 16KB ZIP 举报
![avatar](https://profile-avatar.csdnimg.cn/d447968c226a4cefba6233e2f2a4df24_m0_62396648.jpg!1)
毕业_设计
- 粉丝: 1946
- 资源: 1万+
最新资源
- 鼎科 烧录工具 Gprobe 最新版本
- 零跑C10车载B站软件安装
- waterfall.js
- 729705932303174springboot员工工资管理系统03j8q.zip
- ST3414-VB一款SOT23封装N-Channel场效应MOS管
- ImageMetadataReader-example.rar
- ST3414S23RG-VB一款SOT23封装N-Channel场效应MOS管
- java房屋租赁管理系统用户管理、房屋管理、租赁交易、支付、评价反馈、通知提醒、报表统计、管理后台和安全隐私
- 基于opencv的人脸识别项目
- ST3413-VB一款SOT23封装P-Channel场效应MOS管
资源上传下载、课程学习等过程中有任何疑问或建议,欢迎提出宝贵意见哦~我们会及时处理!
点击此处反馈
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback](https://img-home.csdnimg.cn/images/20220527035711.png)
![feedback-tip](https://img-home.csdnimg.cn/images/20220527035111.png)