background-attachment: fixed

最新推荐文章于 2024-03-11 19:43:05 发布
最新推荐文章于 2024-03-11 19:43:05 发布
阅读量707 收藏
点赞数
CC 4.0 BY-SA版权
文章标签： css 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/weixin_50659023/article/details/127065392
本文介绍了CSS中background-attachment属性的用法，包括如何设置背景图像固定或随页面滚动，探讨了scroll、fixed和local三个值的具体效果。

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

CSS background-attachment 属性

background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。

标签定义及使用说明
默认值: scroll
继承: no
版本: CSS1
JavaScript 语法: object object.style.backgroundAttachment=“fixed”

属性值
scroll 背景图片随着页面的滚动而滚动，这是默认的。
fixed 背景图片不会随着页面的滚动而滚动。
local 背景图片会随着元素内容的滚动而滚动。
initial 设置该属性的默认值。 阅读关于 initial 内容
inherit 指定 background-attachment 的设置应该从父元素继承。
在这里插入图片描述

background-attachment: fixed

background-attachment：fixed实现酷炫效果
dai_yanxia的博客
09-27 2936
最近发现一个css的背景图片的属性，可以实现一个很酷璇的效果，根据效果，我给它命名为王者换肤，下面我们来看一下它的实现方式。 css3参考手册 的背景与边框目录里面，有一个介绍background-attachment属性的，它的值有3个，分别是fixed,scroll,local,他们分别代表的意义如下： 首先测试一下scroll属性的效果,页面结构如下： <div class="wrap item1">
background-attachment: fixed的用法
梁同学与Android
11-12 5851
CSS background-attachment 属性 标签定义及使用说明 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。 默认值: scroll 继承: no 版本: CSS1 JavaScript 语法: object object.style.backgroundAttachment=“fixed” 属性值 scroll 背景图片随着页面的滚动而...
background-attachment: fixed;
jjsnc
06-02 720
html<!DOCTYPE html> <html><head> <meta charset="utf-8"> <title></title> <link rel="stylesheet" type="text/css" href="./css/style.css"> </head><body> <section></section> <section></s
关于css背景属性background-attachment：fixed的问题
weixin_49404977的博客
01-25 229
如果在一个有宽度和高度的盒子里，设置一个背景图片，并继续设置背景图片固定（background-attachment：fixed），此时背景图片的位置是相对与body来设置的，而不是该盒子本身。要将背景图像固定在视口中，可以使用CSS的background-attachment属性，并将其设置为fixed。此属性将指定背景图像相对于视口固定位置，而不是相对于元素本身的位置滚动。
背景固定和滚动 background-attachment: fixed/scroll；
m0_55751104的博客
08-23 987
背景固定和滚动 background-attachment: fixed/scroll;
ios background-attachment:fixed
06-03
在 iOS 中，background-attachment: fixed 的效果会被禁用，因为它会影响到页面的滚动性能。在 iOS 中，背景图像会随着页面的滚动而滚动，而不是像 fixed 效果一样固定在页面的某个位置。 如果你希望在 iOS 中实现...
background-attachment: fixed 在iphone设备失效的解决
06-08
在 iPhone 设备上，当使用 `background-attachment: fixed` 属性时，背景图像不会像在其他设备上一样固定，而是会随着页面滚动而滚动。这是因为 Safari 浏览器在 iOS 设备上禁用了此属性，以提高性能和减少内存占用...
body { font-size: 75%; font-family: Arial, Helvetica, sans-serif;; background-repeat: repeat-x; background-color: #FFFFF0; background-attachment: fixed; color: #ADD8E6;; margin: 20px; } li a { display: block; padding: 12px; margin: 5px; } a { color: slateblue; text-decoration: none; } ul { list-style: none; color: black; font-size: 12px; margin: 0; padding: 0; } #header { margin: auto; width: 100%; font-size: 20px; text-align: center; position: static; padding: 0; } #menu { position: fixed; border-radius: 25px; border: 5px ridge #39C5BB; padding: 10px; width: 4%; height: 75%; top: 85px; overflow: auto; } #content { border-radius: 25px; border: 5px ridge #39C5BB; padding: 20px; width: 70%; height: 75%; position: fixed; left: 22%; top: 85px; font-size: 16px; color: #33FFCC; overflow: auto; } li a.active { background-color: #609f80; color: white; } li { border-bottom: 1px solid #ADD8E6; } li a:hover:not(.active) { background-color: #666; color: white; }（帮我整理一下这些代码，保持功能不变的情况下更加合理整洁）
03-18
background-attachment: fixed; background-repeat: repeat-x; } /* 通用链接样式 */ a { color: slateblue; text-decoration: none; } /* 导航列表容器 */ ul { margin: 0; padding: 0; color: black; ...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>学习天地</title> {% load static %} <!-- 加载静态文件标签 --> <style> /* 设置背景图片 */ body { min-height: 10vh; /* 设置最小高度为视口高度 */ margin: 0; /* 移除默认边距 */ padding: 0; /* 移除默认内边距 */ font-family: Arial, sans-serif; background-image: url("{% static 'images/学习天地.jpg' %}"); <!-- 使用静态文件标签加载图片 --> background-size: cover; /* 宽度 300px，高度自动调整 */ background-position: center; <!-- 图片居中显示 --> background-attachment: fixed; background-repeat: no-repeat; <!-- 防止图片重复 --> color: white; <!-- 设置文字颜色为白色，确保在背景上清晰可见 --> } /* 其他样式保持不变 */ .course-list { list-style-type: none; padding: 0; } .course-item { background-color: rgba(249, 249, 249, 0.8); <!-- 添加透明度，使背景图片可见 --> margin: 10px 0; padding: 15px; border-radius: 5px; box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); } .course-item a { color: #007BFF; text-decoration: none; } .course-item a:hover { text-decoration: underline; } .pagination { margin-top: 20px; text-align: center; } .pagination a { margin: 0 5px; color: #007BFF; text-decoration: none; } .pagination a:hover { text-decoration: underline; } </style> </head> <body> <h1 style="font-size: 100px; color:rgb(14, 84, 204);">学习天地</h1> <a href="{% url 'home' %}" style="font-size: 50px; color:rgb(183, 118, 5);">点击进入主页</a> </body> </html>代码运行后，浏览器只能显示背景图片的一部分
最新发布
03-19
background-attachment: fixed; /* 固定背景位置 */ background-size: cover; /* 自动拉伸至覆盖整个视口 */ } ``` 上述代码片段利用了`cover`关键字[^4]，它会使背景图像保持原始宽高比的同时尽可能大到能覆盖...
关于background-attachment: fixed 实现滚动视差的逻辑理解
lin_jiejie的博客
04-18 1315
使用 background-attachment: fixed 实现滚动视差 <section style="height: 300px;width:500px;background: url('http://pic7.photophoto.cn/20080407/0034034859692813_b.jpg') fixed no-repeat;">IMG1</section...
background-attachment: fixed；页面滚动得到不同的背景图（好看）
qq_60839348的博客
03-09 304
background-attachment: fixed;页面滚动得到不同的背景图
CSS笔记-background-attachment:fixed用法
印第安米饭
11-10 4559
个人理解：在当前盒子里，背景会相对盒子等距离反方向移动，造成一种盒子上下滚动，背景图原地不动的效果。 PS：只和当前设置了背景的盒子有关系，和其他所有元素都没关系 上图，除了背景图片，多设置一句即可 background-attachment:fixed PS：如果大家想自行测试，一个大盒子，设置上背景，下面写一堆字，就像此gif，设置大盒子的background-attachment:fixe...
用background-attachment:fixed做动画效果
web_xiaoling_notes的博客
05-23 949
上下滚动这个demo页面（用IE6的可以先一边去），可以看到图片有切换的动画效果，感觉还挺先进的，但其实这个demo的页面的代码灰常简单，就是在几个div里放几张背景图片，然后把背景图片设为固定就行了。 所以background-attachment:fixed真的是一个很神奇的东西，如果利用得好可以做出很炫的效果。下面就详细说下background-attachment属性。 bac
background-attachment：背景图像是否固定或者随着页面的其余部分滚动。
STRINGANIMAL的博客
03-11 535
background-attachment:fixed：背景图片是固定的。
css background-attachment:fixed 固定背景、不随内容一起滚动
愿我如星君如月 ... 夜夜流光相皎洁 ...
01-17 2994
兼容性：全兼容，只不过IE滚动时会有一点不流畅。 background-attachment 有 3 个选项：scroll / fixed / inherit 。 锁定背景： background-attachment:fixed; 要有比较好的体验，建议让background-image:url(""),background-color:""一起使用。这样无图片时也能有很好的体验。...
关于 background-attachment 属性详解
m0_60744481的博客
05-10 7574
记录学习和工作过程中的css问题以及笔记
background-attachment属性值scroll、fixed和local的区别
木木木华的博客
02-01 1776
background-attachment属性值scroll、fixed和local的区别
background-attachment:fixed
weixin_30412167的博客
12-24 141
background-attachment;设置背景图像是否固定或者随着页面的其余部分滚动。 　　scroll:默认值，背景图像随着页面其余部分的滚动而滚动。 　　fixed:当页面上其余内容滚动时，背景图像不会随着滚动。 background-attachment:fixed;就能实现一般的视差滚动了。需要在背景层上设置高度。 转载于:https://www.cnblogs.com/w...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值