背景的偏移与定位和背景固定

本文详细解析CSS中background-position和background-attachment属性的用法,包括如何调整背景图片的位置及固定图片使其不随页面滚动。并通过实例代码展示了具体应用。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

background-position背景的偏移

背景图片默认是贴着元素的左上角显示
通过background-position可以调整背景图片在元素中的位置

可选值:

  • 该属性可以使用 top right left bottom center中的两个值来指定一个背景图片的位置
  • top left 左上
  • bottom right 右下
  • 如果只给出一个值,则第二个值默认是center
也可以直接指定两个偏移量
background-position: -50px -50px;
第一个值是水平偏移量
	- 如果指定的是一个正值,则图片会向右移动指定的像素
	- 如果指定的是一个负值,则图片会向左移动指定的像素
第二个是垂直偏移量
	- 如果指定的是一个正值,则图片会向下移动指定的像素
	- 如果指定的是一个负值,则图片会向上移动指定的像素

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-attachment: fixed;
		}
		body{
			height: 5000px;
			background-image: url(img/3.png);
			background-repeat: no-repeat;
			background-attachment: fixed;
		}
	</style>
</head>
<body>
	<div class="box1"></div>
</body>
</html>

background-attachment:fixed图片固定

当背景图片的background-attachment设置为fixed时,背景图片的定位永远相对于浏览器的窗口

### CSS 背景定位 `background-position` 的使用方法 #### 1. 基本概念 `background-position` 属性用于定义背景图片的起始位置,该位置基于由 `background-origin` 定义的坐标系来计算[^1]。通过调整此属性,可以精确控制背景图像在容器中的显示区域。 #### 2. 默认行为 默认情况下,如果未指定 `background-position`,浏览器会将背景图片放置于元素左上角(即 `0% 0%` 或者 `left top`)。对于超大尺寸的背景图片,通常推荐使用居中顶部的方式 (`center top`) 来优化视觉效果[^2]。 #### 3. 关键值解析 以下是常见的 `background-position` 取值及其含义: | **取值** | **描述** | |------------------|--------------------------------------------------------------------------| | `% 百分比形式` | 表示相对于容器宽度/高度的比例偏移量。例如 `50% 50%` 将使图片中心对齐到容器中央。 | | `关键词组合` | 如 `top left`, `bottom right` 等预设方位词可快速设定标准四向边界点[^3]。 | | `像素单位 px/em` | 提供绝对数值型距离参数,适合固定布局场景下精确定位需求。 | #### 4. 实际应用案例 下面展示如何利用不同类型的 `background-position` 设置实现多样化的页面设计风格。 ##### 示例一:简单百分比定位 ```css div { width: 300px; height: 200px; border: 1px solid black; background-image: url('image.jpg'); background-repeat: no-repeat; /* 防止重复 */ background-position: 50% 75%; /* 图片位于中间靠下的位置 */ } ``` ##### 示例二:关键字定位 ```css section { width: 400px; height: 300px; border: 2px dashed gray; background-image: url('pattern.png'); background-repeat: repeat-x; /* 水平方向填充 */ background-position: bottom center; /* 底部正中 */ } ``` ##### 示例三:混合模式——结合其他背景特性 当处理较大分辨率的全屏背景时,常需综合运用多个样式声明共同作用。 ```css body { margin: 0; padding: 0; background-color: #f8f9fa; background-image: url('hero-banner.jpg'); background-size: cover; /* 自动缩放匹配屏幕比例 */ background-repeat: no-repeat; background-position: center top; /* 锁定顶端居中视窗 */ } ``` #### 5. 注意事项 - 如果希望背景图完全覆盖整个可视区而不失真,则应配合 `background-size: cover` 使用。 - 当前主流浏览器均支持上述语法结构,但在旧版 IE 中可能存在兼容性问题,请酌情考虑降级方案或 polyfill 工具引入。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值