给body设置背景图片

最新推荐文章于 2024-05-31 09:09:34 发布

Templar136

最新推荐文章于 2024-05-31 09:09:34 发布

阅读量1.9w

点赞数 13

CC 4.0 BY-SA版权

分类专栏： WEB前端学习文章标签： html

本文链接：https://blog.csdn.net/Templar136/article/details/114463222

WEB前端学习专栏收录该内容

5 篇文章

订阅专栏

效果

在这里插入图片描述

代码

<!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>换肤效果</title>
    <style>
    body{
   		 background:url(image/changeBack/04.jpg) no-repeat center top;
   		 background-size:cover;
   		 background-attachment:fixed;
		}
    </style>
</head>
<body>

</body>
</html>

background-size:cover

background-size 设置背景图片大小。图片可以保有其原有的尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸。
cover
缩放背景图片以完全覆盖背景区，可能背景图片部分看不见。和 contain 值相反，cover 值尽可能大的缩放背景图像并保持图像的宽高比例（图像不会被压扁）。该背景图以它的全部宽或者高覆盖所在容器。当容器和背景图大小不同时，背景图的左/右或者上/下部分会被裁剪。
contain
缩放背景图片以完全装入背景区，可能背景区部分空白。contain 尽可能的缩放背景并保持图像的宽高比例（图像不会被压缩）。该背景图会填充所在的容器。当背景图和容器的大小的不同时，容器的空白区域（上/下或者左/右）会显示由 background-color 设置的背景颜色。
background-size属性MDN详解

background-attachment

background-attachment CSS 属性决定背景图像的位置是在视口内固定，或者随着包含它的区块滚动。
fixed
此关键属性值表示背景相对于视口固定。即使一个元素拥有滚动机制，背景也不会随着元素的内容滚动。
local
此关键属性值表示背景相对于元素的内容固定。如果一个元素拥有滚动机制，背景将会随着元素的内容滚动，并且背景的绘制区域和定位区域是相对于可滚动的区域而不是包含他们的边框。
scroll
此关键属性值表示背景相对于元素本身固定，而不是随着它的内容滚动（对元素边框是有效的）。
background-attachment属性MDN详解