css背景 ( 6种实例）

最新推荐文章于 2024-08-25 07:11:13 发布

司六米希

最新推荐文章于 2024-08-25 07:11:13 发布

阅读量1.5k

点赞数 2

分类专栏：前端项目文章标签： css html css3

本文链接：https://blog.csdn.net/weixin_50927106/article/details/123480809

版权

前端项目专栏收录该内容

10 篇文章 0 订阅

订阅专栏

css背景实例

图片网站
背景
CSS背景属性

图片网站

阿里巴巴矢量图标库
 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：(简写属性)作用是将背景属性设置在一个声明中。