文档建议反馈控制台
首页
学习
活动
专区
圈层
工具
MCP广场
文章/答案/技术大牛
发布
    • 综合排序
    • 最热优先
    • 最新优先
    时间不限
    时间不限
    最近一周
    最近一月
    最近三月
  • 来自专栏TomatoCool

    background-attachment属性

    通过background-attachment: fixed能够做出滚动视差的效果

    27720编辑于 2023-07-30
  • 来自专栏用户7873631的专栏

    详解：41 background-attachment

    background-attachment:scroll,default，默认值
    background-attachment:scroll,default，默认值
    background-attachment background-attachment:local,相对元素内容
    background-attachment:local,相对元素内容
    background-attachment background-attachment:local,相对元素内容
    background-attachment:local,相对元素内容
    background-attachment background-attachment:local,相对元素内容
    background-attachment:local,相对元素内容
    background-attachment background-attachment:local,相对元素内容
    background-attachment:local,相对元素内容
    background-attachment

    40610发布于 2020-10-28
  • 来自专栏韩曙亮的移动开发专栏

    【CSS】CSS 背景设置 ⑥ ( 背景附着 | background-attachment )

    还是 固定的 ; 使用 背景附着 的前提也是必须 提前设置 背景图片 , 背景图片设置语法如下 : background-image: url(images/xxx.jpg); 背景附着 语法如下 : background-attachment : scroll | fixed background-attachment 属性值设置 : scroll 或 fixed 二选一 ; scroll : 背景图像 与 网页内容 绑定 , 网页滚动时 background-repeat: no-repeat; /* 超大背景图片定位 */ background-position: center top; /* 背景固定 */ background-attachment background-repeat: no-repeat; /* 超大背景图片定位 */ background-position: center top; /* 背景固定 */ /*background-attachment : fixed;*/ /* 背景滚动 */ background-attachment: scroll; } p { font-size: 50px; color

    2.3K20编辑于 2023-03-30
  • 来自专栏Devops专栏

    CSS background-attachment 背景图片固定效果

    background-attachment 设置背景图片是固定还是随着页面滚动条滚动 当给页面body设置背景图片，背景图片默认是随着滚动条下拉而滚动的。下面写一个示例看看，如下： <! 这里就涉及到了background-attachment:fixed;的属性。 设置背景图片固定 ? 下面再看下拉一下浏览器看看，如下： ?

    1.4K20发布于 2019-06-02
  • 来自专栏Coco的专栏

    滚动视差？CSS 不在话下

    下面就让我们来见识一二： 认识 background-attachment background-attachment 算是一个比较生僻的属性，基本上平时写业务样式都用不到这个属性。 background-attachment：如果指定了 background-image ，那么 background-attachment 决定背景是在视口中固定的还是随着包含它的区块滚动的。 单单从定义上有点难以理解，随下面几个 Demo 了解下 background-attachment 到底是什么意思： background-attachment: scroll scroll 此关键字表示背景相对于元素本身固定 background-attachment: fixed 来实现滚动视差。 我们把上面 background-attachment: fixed 注释掉，或者改为 background-attachment: local，再看看效果： [parallax background-attachment

    2.4K80发布于 2018-08-10
  • 来自专栏Coco的专栏

    使用纯 CSS 实现滚动阴影效果

    神奇的 background-attachment 要使用纯 CSS 实现上述滚动阴影，最核心的要使用到的元素就是 background-attachment。 当然，今天我们的主角不是 background-attachment: fixed，而是 background-attachment: srcoll。 background-attachment: srcoll 首先，介绍一下 background-attachment，如果指定了 background-image ，那么 background-attachment 通过两个简单的 Demo，弄懂 background-attachment: srcoll 和 background-attachment: local。 我们用给滚动容器，加上两个渐变效果，分别运用上 background-attachment: srcoll 和 background-attachment: local，再叠加起来，像是这样： <!

    3.1K20发布于 2021-01-06
  • 来自专栏grain先森

    前端-滚动视差？CSS 不在话下

    下面就让我们来见识一二： 认识 background-attachment background-attachment 算是一个比较生僻的属性，基本上平时写业务样式都用不到这个属性。 background-attachment：如果指定了 background-image ，那么 background-attachment 决定背景是在视口中固定的还是随着包含它的区块滚动的。 单单从定义上有点难以理解，随下面几个 Demo 了解下 background-attachment 到底是什么意思： background-attachment: scroll scroll 此关键字表示背景相对于元素本身固定 我们把上面 background-attachment: fixed 注释掉，或者改为 background-attachment: local，再看看效果： ? 当然，background-attachment: fixed 本身的效果并不仅只是能有用来实现滚动视差效果，合理运用，还可以实现其他很多有趣的效果，这里简单再列一个： background-attachment

    2.1K30发布于 2019-03-29
  • 来自专栏IMWeb前端团队

    滚动视差？CSS不在话下

    下面就让我们来见识一二： 认识 background-attachment background-attachment 算是一个比较生僻的属性，基本上平时写业务样式都用不到这个属性。 background-attachment：如果指定了 background-image ，那么 background-attachment 决定背景是在视口中固定的还是随着包含它的区块滚动的。 单单从定义上有点难以理解，随下面几个 Demo 了解下 background-attachment 到底是什么意思： background-attachment: scroll scroll 此关键字表示背景相对于元素本身固定 background-attachment: fixed 来实现滚动视差。 我们把上面 background-attachment: fixed 注释掉，或者改为 background-attachment: local，再看看效果： ?

    1.6K20发布于 2019-12-03
  • 来自专栏Coco的专栏

    滚动视差？CSS 不在话下

    下面就让我们来见识一二： 认识 background-attachment background-attachment 算是一个比较生僻的属性，基本上平时写业务样式都用不到这个属性。 background-attachment：如果指定了 background-image ，那么 background-attachment 决定背景是在视口中固定的还是随着包含它的区块滚动的。 单单从定义上有点难以理解，随下面几个 Demo 了解下 background-attachment 到底是什么意思： background-attachment: scroll scroll 此关键字表示背景相对于元素本身固定  background-attachment: fixed 来实现滚动视差。 我们把上面 background-attachment: fixed 注释掉，或者改为 background-attachment: local，再看看效果： ?

    2.1K31发布于 2019-02-21
  • 来自专栏网络收集

    css入门（6）

    七、background-attachment属性 在CSS中，使用背景附件属性background-attachment可以设置背景图像是随对象滚动还是固定不动。 语法： background-attachment:scroll/fixed; 说明： background-attachment 属性只有2个属性值。 DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>background-attachment属性 /App_images/lesson/run_cj/cartoongirl.gif"); background-repeat:no-repeat; background-attachment 在IE或者360中设置background-attachment之后不能设置background-position属性，不然图片没办法在浏览器显示。

    65630编辑于 2022-04-12
  • 来自专栏技巧笔记

    typecho网页背景图设计代码

    background-attachment :定义背景图片随滚动轴的移动方式 取值: scroll | fixed | inherit scroll: 随着页面的滚动轴背景图片将移动 fixed: 随着页面的滚动轴背景图片不会移动 url(https://for.886a.top/wp-content/uploads/2021/05/内衬纸.png); background-repeat: repeat; background-attachment /images/bakimg.jpg); background-size: 100% 100%; background-repeat: no-repeat; background-attachment 背景图片地址) no-repeat fixed center top; margin:0; padding:0; } 只需要一个核心代码就实现了背景不随浏览器滚动，兼容了IE6+浏览器， 其核心代码为： background-attachment

    73620编辑于 2022-11-28
  • 来自专栏0x7c00的专栏

    CSS(四)

    与 background 有关的属性 background-color background-image background-repeat background-attachment background-position repeat-x; repeat-y: 沿 y 方向重复 background-repeat: repeat-y; no-repeat: 不重复 background-repeat: no-repeat; background-attachment background-attachment 属性定义了背景在可滑动页面中的行为。 2 种可选取值: scroll(默认): 跟随滑动 background-attachment: scroll; fixed: 背景图像不会随页面滚动，并根据视口保持定位。 background-attachment: fixed; background-position background-position 元素定义背景出现的位置。

    60930发布于 2021-10-29
  • 来自专栏韩曙亮的移动开发专栏

    【CSS】CSS 背景设置 ⑦ ( 背景简写 )

    background-repeat: no-repeat; /* 超大背景图片定位 */ background-position: center top; /* 背景固定 */ /*background-attachment : fixed;*/ /* 背景滚动 */ background-attachment: scroll; } 类似于 文本样式的字样样式综合写法 方式 , 选择器 { font: : no-repeat;*/ /* 超大背景图片定位 */ /*background-position: center top;*/ /* 背景固定 */ /*background-attachment : fixed;*/ /* 背景滚动 */ /*background-attachment: scroll;*/ /* 背景简写方式 */ background:

    3.6K10编辑于 2023-03-30
  • 来自专栏方球

    golang http

    background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment background-image: inherit; background-position: inherit; background-size: inherit; background-repeat: inherit; background-attachment

    49730发布于 2019-08-21
  • 来自专栏IT当时语_青山师_JAVA技术栈

    CSS从基础到熟练学习笔记（三）CSS中的5种背景属性(背景颜色、背景图片、固定背景图片等)

    ，常用的有5种背景属性：背景颜色、背景图片、背景图片重复展示的方式、背景附着的方式以及背景位置 background-color background-image background-repeat background-attachment img-blog.csdn.net/20161118220122095"); background-repeat: no-repeat; background-position: center } 背景图片附着状态background-attachment CSS使用 background-attachment属性指明 背景附件属性来设置背景图像是否是固定的或是与页面的其余部分一起滚动。 语法： background-attachment: scroll| fixed| local| initial| inherit; 属性值： scroll 随元素一起滚动，默认值。 img-blog.csdn.net/20161118220122095"); background-repeat: no-repeat; background-position: right top background-attachment

    2K10编辑于 2023-05-04
  • 来自专栏Html5知典

    CSS——背景

    backgroundrepeat属性) 背景填充范围 列表 元素 描述 background background 包括background-color、background-image、background-repeat、background-attachment background-attachment background-attachment设置背景图像是否固定或者随着页面的其余部分滚动，其默认值为scroll。

    1.4K20发布于 2019-11-26
  • 来自专栏前端基础

    CSS实现全屏背景图片铺满自适应

    确保图片覆盖整个元素 */ background-position: center; /* 将图片居中显示 */ min-height: 100vh; /* 确保至少为视口高度 */}方式二：使用background-attachment 属性通过设置background-attachment属性为fixed，可以使背景图片在页面滚动时保持固定。. background-image: url('path-to-image.jpg'); background-size: 100% 100%; background-position: center; background-attachment

    1.4K10编辑于 2024-09-30
  • 来自专栏Python

    网页如何设置背景图片

    CSS样式即可： body{ background:url(image/background.jpg); background-size:cover; background-attachment background-position: center center; /* 背景图垂直、水平均居中 */ background-repeat: no-repeat; /* 背景图不平铺 */ background-attachment 指定背景图片的大小 3 background-repeat 指定如何重复背景图像 1 background-origin 指定背景图像的定位区域 3 background-clip 指定背景图像的绘画区域 3 background-attachment

    85310编辑于 2024-10-12
  • 来自专栏前端森林

    滚动视差让你不相信“眼见为实”

    css 实现 css 中主要有两种实现方式:分别是通过background-attachment: fixed和transform: translate3d来实现，下面让我们看一下具体的实现方式: background-attachment : fixed 平时业务开发中可能不太会用到background-attachment，让我们先来认识一下它。 background-attachment CSS 属性决定背景图像的位置是在视口内固定，还是随着包含它的区块滚动。 它一共有三个属性: fixed: 键字表示背景相对于视口固定。 我们使用 background-attachment: fixed 来实现视差滚动，看一下示例: // html

    1
    <div class="a-img1 : cover; background-position: center center; } .a-img2 { background-image: url($img2); <em>background-attachment</em>

    2.7K76发布于 2020-04-23
  • 来自专栏前端资源

    HTML设定页面可滚定 背景图片固定

    其实很容易实现，利用 background-attachment:fixed; 就能实现，代码如下： body{     background: url("bg.png");     background-repeat : no-repeat;     background-attachment:fixed; }

    2.6K00发布于 2019-11-13
第 2 页第 3 页第 4 页第 5 页第 6 页第 7 页第 8 页第 9 页第 10 页第 11 页
点击加载更多

腾讯云开发者

扫码关注腾讯云开发者

扫码关注腾讯云开发者

领取腾讯云代金券

热门产品

热门推荐

更多推荐

Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 粤公网安备44030502008569号

腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号

领券