图片网站

阿里巴巴矢量图标库
pixabay
图片转链接网站

背景

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：(简写属性)作用是将背景属性设置在一个声明中。