css背景 ( 6种实例）
css背景实例
图片网站
背景
1.设置页面的背景颜色
<style>
body
{
background-color:#b0c4de;
}
</style>
</head>
<body>
</body>同理设置不同元素的颜色
2.设置图像作为页面背景
2.1图片加入至背景的方式
2.1.1通过链接
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-image: url('https://cdn.pixabay.com/photo/2021/01/17/02/02/planets-5923806__340.jpg');
background-color: #cccccc;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
2.2背景样式
- background-size背景尺寸 background-size: 100%时，横轴处于100%,纵轴会出现重复现象(随着页面尺寸变化) 百分比是水平方向的占页面百分比, 此时会等图片比例决定图片高度
background-size:50%; background-size:100px 50px; // 宽100，高50 background-size:cover; // 拉大图片，完全填满，保持宽高比 background-size:contain; // 缩放图片，使其恰好适合背景区，保持宽高比
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-image: url('https://cdn.pixabay.com/photo/2021/01/17/02/02/planets-5923806__340.jpg');
background-color: #cccccc;
background-size: 100%;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
- background-repeat背景重复 background-repeat: no-repeat;背景不重复
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
body {
background-image: url('https://cdn.pixabay.com/photo/2021/01/17/02/02/planets-5923806__340.jpg');
background-color: #cccccc;
background-size: 100%;
background-repeat: no-repeat;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
(图片下方出现空白是由于 background-size: 100%;等图片比例影响，所以未占满页面全屏)
3.定位背景图像
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>司六米希</title>
<style>
body {
background-image: url('https://i.postimg.cc/MTmfKgKQ/image.png');
background-size: 20%;
background-repeat: no-repeat;
background-position: right top;
margin-right: 200px;
}
</style>
</head>
<body>
<h1>Hello World!</h1>
<p>实例中添加 margin-right 属性用于让文本与图片间隔开</p>
</body>
</html>
4.固定背景
背景图片固定，图片不会随着页面滚动而改变位置
- background-attachment: fixed;
</html>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>司六米希</title>
<style>
body {
background-image: url('https://i.postimg.cc/MTmfKgKQ/image.png');
background-size: 20%;
background-repeat: no-repeat;
background-attachment: fixed;
}
</style>
</head>
<body>
<p>司六司六!</p>
<p>司六司六!</p>
<p>司六司六!</p>
<p>司六司六!</p>
<p>司六司六!</p>
<p>司六司六!</p>
<p>司六司六!</p>
<p>司六司六!</p>
<p>司六司六!</p>
<p>司六司六!</p>
<p>司六司六!</p>
<p>司六司六!</p>
<p>司六司六!</p>
<p>司六司六!</p>
</body>
</html>
5. 多图片背景
background:
url('') no-repeat 10px 0px...,
url('') no-repeat 10px 60px...,
url('') no-repeat 10px 120px...;6.渐变背景
background: linear-gradient(45deg, blue, red);
CSS背景属性
背景属性 菜鸟教程 background-color：设置元素的背景颜色。 background-image：把图像设置为背景。 background-repeat：设置背景图像是否及如何重复。 backgroud-position：设置背景图像的起始位置。 background-size：设置背景图片大小。 background-attachment：背景图像是否固定或者随着页面的其余部分滚动。背景黏附 background：(简写属性)作用是将背景属性设置在一个声明中。
本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022-03-14，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
