CSS是网页设计中必不可少的一项技术，它可以让我们实现各种各样的效果。在众多CSS效果中，背景上浮动文本的效果被广泛应用，使页面表现更加生动、有趣、丰富。下面介绍如何利用CSS实现背景上浮动文本的效果。
//
html代码
<div class="box">
<p>这是一个背景上浮动的文本效果</p>
</div>
//
CSS代码
.box {
position: relative;
// 父元素设置
relative定位
background: url("background.jpg") no-repeat center center;
// 设置背景图
&
nbsp;
background-size: cover;
// 铺满整个父元素
&
nbsp;
width: 600px;
height: 400px;
}
.box p {
position: absolute;
// 子元素设置
absolute定位
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
// 水平垂直居中
&
nbsp;
color: white;
font-size: 30px;
font-weight: bold;
text-align: center;
letter-spacing: 5px;
text-shadow: 1px 1px 2px #000;
animation: float 5s infinite;
// 设置动画
}
@
keyframes float {
from {
// 动画开始状态
&
nbsp;
transform: translateY(0);
}
to {
// 动画结束状态
&
nbsp;
transform: translateY(-20px);
}
}
通过以上CSS代码，我们就可以轻松地实现背景上浮动文本的效果了。在父元素上设置背景图，并用子元素p标签来承载文本，通过absolute定位实现文本在父元素中的居中，并用@keyframe动画来实现文本的上浮效果。
