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

最新推荐文章于 2024-04-28 17:55:17 发布
最新推荐文章于 2024-04-28 17:55:17 发布
阅读量373 收藏 1
点赞数 3
文章标签： java 前端 数据库
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/STRINGANIMAL/article/details/136633062
版权

background-attachment:fixed：背景图片是固定的。可以向下滚动页面。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title>
<style>
body 
{
background-image:url('https://img0.baidu.com/it/u=3628503530,464378779&fm=253&app=120&size=w931&n=0&f=JPEG&fmt=auto?sec=1710262800&t=468e652114746d5826b13650591810f8');
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>
<p>背景图片是固定的。尝试向下滚动页面。</p>
</body>

</html>

蔡滔！
关注
  • 3
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
background-attachment：fixed实现酷炫效果
dai_yanxia的博客
09-27 2795
最近发现一个css的背景图片的属性，可以实现一个很酷璇的效果，根据效果，我给它命名为王者换肤，下面我们来看一下它的实现方式。 css3参考手册 的背景与边框目录里面，有一个介绍background-attachment属性的，它的值有3个，分别是fixed,scroll,local,他们分别代表的意义如下： 首先测试一下scroll属性的效果,页面结构如下： <div class="wrap item1">
css background-attachment属性进阶
09-24
CSS中的`background-attachment`属性是用来控制背景图像随滚动条移动的方式。在深入理解这个属性之前，我们需要确保已经设置了`background-image`属性，因为它定义了背景图像。`background-attachment`接着决定背景...
关于 background-attachment 属性详解
m0_60744481的博客
05-10 5515
记录学习和工作过程中的css问题以及笔记
CSS实现背景图跟随滚动
最新发布
web_Bennu的博客
04-28 263
CSS实现背景图跟随滚动，从而实现背景图看上去像是固定在视口区域的效果。
background-attachment: fixed
weixin_50659023的博客
09-27 581
background-attachment: fixed
background-attachment: fixed;
jjsnc
06-02 672
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
background-attachment: fixed的用法
梁同学与Android
11-12 5700
CSS background-attachment 属性 标签定义及使用说明 background-attachment设置背景图像是否固定或者随着页面的其余部分滚动。 默认值: scroll 继承: no 版本: CSS1 JavaScript 语法: object object.style.backgroundAttachment=“fixed” 属性值 scroll 背景图片随着页面的滚动而...
关于background-attachment: fixed 实现滚动视差的逻辑理解
lin_jiejie的博客
04-18 1216
使用 background-attachment: fixed 实现滚动视差 <section style="height: 300px;width:500px;background: url('http://pic7.photophoto.cn/20080407/0034034859692813_b.jpg') fixed no-repeat;">IMG1</section...
css 背景固定样式background-attachment属性基础
09-24
主要为大家介绍了在CSS中，使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动,需要的朋友可以参考下
滚动视差效果background-attachment实战记录
09-25
1. `scroll`: 这是默认值，意味着背景图像会随着页面其余部分一起滚动。 2. `fixed`: 当页面内容滚动时，背景图像的位置固定不变，给人以视觉上的深度感。 3. `inherit`: 元素从其父元素继承`background-attachment`...
background-attachment: fixed；页面滚动得到不同的背景图（好看）
qq_60839348的博客
03-09 202
background-attachment: fixed;页面滚动得到不同的背景图
用background-attachment:fixed做动画效果
web_xiaoling_notes的博客
05-23 895
上下滚动这个demo页面（用IE6的可以先一边去），可以看到图片有切换的动画效果，感觉还挺先进的，但其实这个demo的页面的代码灰常简单，就是在几个div里放几张背景图片，然后把背景图片设为固定就行了。 所以background-attachment:fixed真的是一个很神奇的东西，如果利用得好可以做出很炫的效果。下面就详细说下background-attachment属性。 bac
背景固定和滚动 background-attachment: fixed/scroll；
m0_55751104的博客
08-23 849
背景固定和滚动 background-attachment: fixed/scroll;
CSS笔记-background-attachment:fixed用法
印第安米饭
11-10 4432
个人理解：在当前盒子里，背景会相对盒子等距离反方向移动，造成一种盒子上下滚动，背景图原地不动的效果。 PS：只和当前设置了背景的盒子有关系，和其他所有元素都没关系 上图，除了背景图片，多设置一句即可 background-attachment:fixed PS：如果大家想自行测试，一个大盒子，设置上背景，下面写一堆字，就像此gif，设置大盒子的background-attachment:fixe...
background-attachment属性值scroll、fixed和local的区别
木木木华的博客
02-01 1367
background-attachment属性值scroll、fixed和local的区别
css属性 background-attachment: fixed; 实现背景图片不随浏览器滚动，实现背景图片固定
丽丽大神ing的博客
12-10 2898
1.参考链接  http://www.w3school.com.cn/cssref/pr_background-attachment.asp
background-attachment:fixed
weixin_30412167的博客
12-24 104
background-attachment;设置背景图像是否固定或者随着页面的其余部分滚动。 　　scroll:默认值，背景图像随着页面其余部分的滚动而滚动。 　　fixed:当页面上其余内容滚动时，背景图像不会随着滚动。 background-attachment:fixed;就能实现一般的视差滚动了。需要在背景层上设置高度。 转载于:https://www.cnblogs.com/w...
css background-attachment:fixed 固定背景、不随内容一起滚动
愿我如星君如月 ... 夜夜流光相皎洁 ...
01-17 2897
兼容性：全兼容，只不过IE滚动时会有一点不流畅。 background-attachment 有 3 个选项：scroll / fixed / inherit 。 锁定背景： background-attachment:fixed; 要有比较好的体验，建议让background-image:url(""),background-color:""一起使用。这样无图片时也能有很好的体验。...
ios background-attachment:fixed
06-03
在 iOS 中，background-attachment: fixed 的效果会被禁用，因为它会影响到页面的滚动性能。在 iOS 中，背景图像会随着页面的滚动而滚动，而不是像 fixed 效果一样固定在页面的某个位置。 如果你希望在 iOS 中实现类似于 background-attachment: fixed 的效果，可以考虑使用 CSS position 属性和 z-index 属性来实现。具体步骤如下： 1. 为需要固定背景的元素设置 position: fixed; 和 z-index: -1;。 2. 将元素的宽度和高度设置为 100%，这样元素就会覆盖整个页面。 3. 将元素的背景图像设置为需要固定的背景图像。 4. 在需要滚动的内容区域中设置 padding-top: 元素高度;，以防止内容被固定背景所遮挡。 下面是一个简单的例子： ``` <body> <div class="bg"></div> <div class="content"> <p>这是一个需要滚动的内容区域。</p> </div> </body> <style> .bg { position: fixed; z-index: -1; width: 100%; height: 100%; background-image: url('bg.jpg'); background-size: cover; background-position: center; } .content { padding-top: 100%; } </style> ``` 在这个例子中，我们创建了一个固定背景的元素，并将其设置为 position: fixed; 和 z-index: -1;，以使其固定在页面底部。然后，我们将该元素的宽度和高度设置为 100%，并设置了背景图像。在内容区域中，我们设置了 padding-top: 100%;，以防止内容被背景图像所遮挡。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值