HTML5背景渐变效果
<!DOCTYPE html>
<html>
<head>
<style>
body, html {
height: 100%;
margin: 0;
font-family: Arial, sans-serif;
}
.gradient-bg {
/* 创建一个线性渐变背景 */
background-image: linear-gradient(to right, #ff7e5f, #feb47b);
height: 100%;
color: white;
text-align: center;
}
.content {
padding: 50px;
/* 使用绝对定位使文本在渐变背景上方便居中 */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
}
</style>
</head>
<body>
<div class="gradient-bg">
<div class="content">
<h1>欢迎来到我的世界</h1>
<p>这里有你想要的一切，只要你愿意去寻找。</p>
</div>
</div>
</body>
</html>这段代码展示了如何在HTML页面中使用CSS样式来创建一个线性渐变背景，并在该背景上居中显示文本内容。通过使用linear-gradient函数，我们定义了从左到右的颜色渐变，并在.content类中使用了position, top, left, 和transform属性来实现文本的绝对居中。
评论已关闭