HTML背景图片和背景色_动力节点Java学院整理
使用背景颜色
可以通过CSS的background-color属性来设置一个元素的背景颜色。
示例一
<!DOCTYPE html>
<html>
<head>
<title>使用背景颜色示例</title>
<style>
.container{
background-color: #F0F8FF; /* 浅蓝色 */
height: 200px;
width: 200px;
padding: 20px;
}
</style>
</head>
<body>
<div class="container">
<h1>这是一个背景色为浅蓝色的容器</h1>
</div>
</body>
</html>
示例二
<!DOCTYPE html>
<html>
<head>
<title>使用背景颜色示例</title>
<style>
body{
background-color: #F5F5F5; /* 灰白色 */
}
h1{
background-color: #4CAF50; /* 绿色 */
color: white;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h1>这是一个背景色为绿色的标题</h1>
</body>
</html>
使用背景图像
可以通过CSS的background-image属性来设置一个元素的背景图像。
示例一
<!DOCTYPE html>
<html>
<head>
<title>使用背景图像示例</title>
<style>
.container{
background-image: url("https://images.unsplash.com/photo-1570975635943-536a41e42c4d");
background-size: cover;
height: 200px;
width: 200px;
}
</style>
</head>
<body>
<div class="container">
<h1>这是一个背景图像的容器</h1>
</div>
</body>
</html>
示例二
<!DOCTYPE html>
<html>
<head>
<title>使用背景图像示例</title>
<style>
body{
background-image: url("https://images.unsplash.com/photo-1571611282749-7d24535f4374");
background-size: cover;
background-position: center;
}
h1{
color: white;
padding: 10px;
text-align: center;
}
</style>
</head>
<body>
<h1>这是一个拥有背景图像的页面</h1>
</body>
</html>
以上就是HTML背景图片和背景颜色的完整攻略。在实际开发中，我们可以根据需求来选择使用合适的背景颜色或背景图像来美化网页。
本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：HTML背景图片和背景色_动力节点Java学院整理 - Python技术站
微信扫一扫 
支付宝扫一扫 