背景偏移与定位

最新推荐文章于 2024-04-19 09:39:59 发布

YRyr.*

最新推荐文章于 2024-04-19 09:39:59 发布

阅读量1.7k

点赞数 3

分类专栏： CSS 文章标签：背景偏移与定位

本文链接：https://blog.csdn.net/weixin_43152725/article/details/85535543

版权

CSS 专栏收录该内容

56 篇文章 0 订阅

订阅专栏

背景图片默认是贴着元素的左上角显示
通过background-position可以调整背景图片在元素中的位置
可选值：
		该属性可以使用 top right left bottom center中的两个值来指定一个背景图片的位置
		top left 左上
		bottom right 右下
		如果只给出一个值，则第二个值默认是center

也可以直接指定两个偏移量
		第一个值是水平偏移量
				- 如果指定的是一个正值，则图片会向右移动指定的像素
				- 如果指定的是一个负值，则图片会向左移动指定的像素
		第二个是垂直偏移量
				- 如果指定的是一个正值，则图片会向下移动指定的像素
				- 如果指定的是一个负值，则图片会向上移动指定的像素

background-attachment用来设置背景图片是否随页面一起滚动
	可选值：
			scroll，默认值，背景图片随着窗口滚动
			fixed，背景图片会固定在某一位置，不随页面滚动
		不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>背景偏移与定位</title>
	<style type="text/css">
		*{
			margin: 0;
			padding: 0;
		}
		.box1{
			/*width: 500px;*/
			height: 500px;
			margin: 0 auto;
			/*设置一个背景颜色*/
			background-color: #bfa;
			/*设置一个背景图片*/
			background-image: url(img/4.png);
			/*设置图片不重复*/
			background-repeat: no-repeat;
			/*
			背景图片默认是贴着元素的左上角显示
			通过background-position可以调整背景图片在元素中的位置
			可选值：
				该属性可以使用 top right left bottom center中的两个值来指定一个背景图片的位置
				top left 左上
				bottom right 右下
				如果只给出一个值，则第二个值默认是center
			也可以直接指定两个偏移量
				第一个值是水平偏移量
					- 如果指定的是一个正值，则图片会向右移动指定的像素
					- 如果指定的是一个负值，则图片会向左移动指定的像素
				第二个是垂直偏移量
					- 如果指定的是一个正值，则图片会向下移动指定的像素
					- 如果指定的是一个负值，则图片会向上移动指定的像素
			*/
			/*background-position: -50px -50px;*/
			background-attachment: fixed;
		}
		body{
			height: 5000px;
			background-image: url(img/3.png);
			background-repeat: no-repeat;
			/*
			background-attachment用来设置背景图片是否随页面一起滚动
			可选值：
				scroll，默认值，背景图片随着窗口滚动
				fixed，背景图片会固定在某一位置，不随页面滚动
			不随窗口滚动的图片，我们一般都是设置给body，而不设置给其他元素
			*/
			background-attachment: fixed;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
</body>
</html>

YRyr.*

关注

3
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
背景偏移与定位

背景图片默认是贴着元素的左上角显示通过background-position可以调整背景图片在元素中的位置可选值：该属性可以使用 top right left bottom center中的两个值来指定一个背景图片的位置 top left 左上 bottom right 右下如果只给出一个值，则第二个值默认是center也可以直接指定两个偏移量第一个值是水平偏移量...
复制链接

扫一扫