html - 如何将一个部分作为所有页面的背景?
问题描述
如何将一个部分作为所有页面的背景?我已经在一个部分中制作了一个FontAwesome 背景动画效果 ,我想用段落、照片来完成页面,并将该部分设置为所有这些的背景。 HTML 代码中大约有 20 行,但我把它缩小了,所以我可以把它放在 StackOverflow 中
*
{
margin: 0;
padding: 0;
}
section
{
position: relative;
width: 100%;
height: 100vh;
background: #111;
display: flex;
flex-direction: column;
overflow: hidden;
}
section .row
{
position: relative;
top: -50%;
width: 100%;
display: flex;
padding: 10px 0;
white-space: nowrap;
font-size: 64px;
transform: rotate(-30deg);
}
i
{
color: rgba(0, 0, 0, 0.5);
transition: 1s;
padding: 0 5px;
user-select: none;
cursor: default;
}
i:hover
{
color: #0f0;
transition: 0s;
text-shadow: 0 0 120px #0f0;
}
section .row div
{
animation: animate1 80s linear infinite;
animation-delay: -80s;
}
section .row div:nth-child(2)
{
animation: animate2 80s linear infinite;
animation-delay: -40s;
}
@keyframes animate1
{
0%
{
transform: translateX(0%);
}
100%
{
transform: translateX(-200%);
}
}
@keyframes animate2
{
0%
{
transform: translateX(100%);
}
100%
{
transform: translateX(-100%);
}
}
section .row:nth-child(even) div
{
animation: animate3 80s linear infinite;
animation-delay: -80s;
}
section .row:nth-child(even) div:nth-child(2)
{
animation: animate4 80s linear infinite;
animation-delay: -40s;
}
@keyframes animate3
{
0%
{
transform: translateX(-100%);
}
100%
{
transform: translateX(100%);
}
}
@keyframes animate4
{
0%
{
transform: translateX(-200%);
}
100%
{
transform: translateX(0);
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta charset="UTF-8">
<title>FontAwesome Background | Animation Effects</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<section>
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
<div class="row">
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
<div>
<i class="fa fa-address-book-o" aria-hidden="true"></i>
<i class="fa fa-bath" aria-hidden="true"></i>
<i class="fa fa-shower" aria-hidden="true"></i>
<i class="fa fa-thermometer-half" aria-hidden="true"></i>
<i class="fa fa-balance-scale" aria-hidden="true"></i>
<i class="fa fa-battery-half" aria-hidden="true"></i>
<i class="fa fa-bell-o" aria-hidden="true"></i>
<i class="fa fa-bicycle" aria-hidden="true"></i>
<i class="fa fa-bolt" aria-hidden="true"></i>
<i class="fa fa-bullhorn" aria-hidden="true"></i>
<i class="fa fa-commenting-o" aria-hidden="true"></i>
<i class="fa fa-code" aria-hidden="true"></i>
<i class="fa fa-comments-o" aria-hidden="true"></i>
<i class="fa fa-envelope-o" aria-hidden="true"></i>
<i class="fa fa-gift" aria-hidden="true"></i>
<i class="fa fa-glass" aria-hidden="true"></i>
<i class="fa fa-globe" aria-hidden="true"></i>
<i class="fa fa-graduation-cap" aria-hidden="true"></i>
<i class="fa fa-heart-o" aria-hidden="true"></i>
<i class="fa fa-hourglass" aria-hidden="true"></i>
</div>
</div>
</section>
</body>
</html>
解决方案
如果你的背景是基于 DOM 元素的,你不能将它应用到另一个页面,除非在另一个地方再次粘贴相同的 html 代码。但是如果你应用基于 CSS 的背景或背景图案,你可以在任何地方都使用这个。在这种情况下,您所能做的就是将该部分绝对定位在您想要的每个页面中,使用堆栈中的正确位置和 z-index。另外,需要检查页面的性能:也许一些 gif 模式会更容易。
推荐阅读
- python-3.x - 1064,“您的 SQL 语法有错误 | PyMySQL 更新过程出现错误
- github - 如何使用 IntelliJ/RubyMine/etc 管理多个 GitHub 帐户
- r - 在部署包含库 rsconnect 的 Shiny App 时面临问题
- google-apps-script - How to unzip .ZIP mime type (application / x-zip-compressed) in google app script
- elasticsearch - 在elasticsearch中搜索文档内的匹配对象
- java-bytecode-asm - How do I get the parameter instructions that belong to a method?
- c# - 在 WPF UserControl 中添加幻灯片动画
- python - run "%run" command from string
- reactjs - Audio element and react-player not working on iPhone mobile
- google-bigquery - Spotfire 和 BigQuery