关于 background-attachment 属性详解

这篇具有很好参考价值的文章主要介绍了关于 background-attachment 属性详解。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

目录

1、background-attachment的官方说明

2、background-attachment的值

3、关于个人的理解

 3.1、默认值 scroll

3.2、fixed

3.3、local

4、个人总结


1、background-attachment的官方说明

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

这句话很简洁,简洁到我无法去理解,所以我决定用我自己的想法去理解。

2、background-attachment的值

background-attachment有三个值:

  • scroll:背景图片随着页面的滚动而滚动,这是默认的。
  • fixed:背景图片不会随着页面的滚动而滚动。
  • local:背景图片会随着元素内容的滚动而滚动。

3、关于个人的理解

大家先来看看我的html代码:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div class="div1">
        <p>1</p><p>1</p>
        <p>1</p><p>1</p>
        <p>1</p><p>1</p>
        <p>1</p><p>1</p>
        <p>1</p><p>1</p>
        <p>1</p><p>1</p>
        <p>1</p><p>1</p>
        <p>1</p><p>1</p>
        <p>1</p><p>1</p>
    </div>
    <div class="div2"></div>
    <style>
        .div1 {
             background-image: url("../img/qier.png");
             width: 100px;
             height: 400px;
             overflow: scroll;
        }
        .div2{
            background-color: white;
            width: 100px;
            height: 3000px;
        }
    </style>
</body>
</html>

大家可以看见,这个html里面有两个div,第一个div里面有很多p标签,目的是为了让overflow:scroll 能起作用,同时也设置宽高和一张背景图片(像素为100*100)。第二个div,目的为了让窗口可以滚动。

大家也可以直接复制我的代码去看看效果。

页面效果如下:

background-attachment,css,css,css3,前端

可以看见,盒子内部和窗口都可以滚动

 3.1、默认值 scroll

背景图片随着页面的滚动而滚动

当我们滚动div里面的滚动条时,发现图片不会动

background-attachment,css,css,css3,前端

而当我们滚动窗口的滚动条时,发现图片会跟着动

background-attachment,css,css,css3,前端

这就是 background-attachment:scroll 的效果

3.2、fixed

背景图片不会随着页面的滚动而滚动

我们给予div background-attachment:fixed 属性

        .div1 {
             background-image: url("../img/qier.png");
             width: 100px;
             height: 400px;
             overflow: scroll;
             background-attachment: fixed;
        }

我们保存刷新页面,然后继续进行上面的操作

当我们滚动div里面的滚动条时,发现图片还是不会动。

background-attachment,css,css,css3,前端

而当我们滚动窗口的滚动条时,发现图片不会跟着动,而是固定在窗口一样

background-attachment,css,css,css3,前端

这就是 background-attachment:fixed 的效果

3.3、local

背景图片会随着元素内容的滚动而滚动

我们给予div background-attachment:local 属性

        .div1 {
             background-image: url("../img/qier.png");
             width: 100px;
             height: 400px;
             overflow: scroll;
             background-attachment: local;
        }

我们保存刷新页面,然后继续进行上面的操作

当我们滚动div里面的滚动条时,发现图片会跟着动。

background-attachment,css,css,css3,前端

 而当我们滚动窗口的滚动条时,发现图片也会跟着动

这就是 background-attachment:local 的效果

4、个人总结

background-attachment的值,以及相对于的效果相信大家已经感受到了,实践出真知,动手操作一遍就懂了。

在日常的使用中,还是background-attachment:fixed 使用的最多,因为这个属性更多的时候是跟background-image等 背景相关的属性一起使用,目的更多的是设置背景图,而一般背景图是固定的,不会随窗口的滚动而滚动,就像是“镶”在窗口的一样,所以background-attachment:fixed 是我学习和工作以来使用最多的,而其他的几乎没有使用的机会(也可能是我个人的接触有限)。文章来源地址https://www.toymoban.com/news/detail-663831.html

到了这里,关于关于 background-attachment 属性详解的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 关于css的zoom属性

    zoom属性是IE专有属性,除了设置或者检索对象的缩放比例之外,它还有可以触发ie的haslayout属性、清除浮动、清除margin重叠等作用。它是作用于块级元素的。 它是整个块级元素整体放大的一个效果。 注意:zoom在非IE浏览器中表现为支持放大或者缩小,但是由于这个属性是一个

    2024年02月04日
    浏览(38)
  • Android Studio设置android:background 属性背景颜色

    除了默认的颜色之外都要自己添加。 添加颜色的操作步骤: 打开 res 文件夹,找 values ,里面有个 colors.xml 的文件。然后在里面定义一些颜色。   完成

    2024年04月28日
    浏览(45)
  • CSS background 背景

    background 属性为元素添加背景效果。 它是以下属性的简写,按顺序为: background-color background-image background-repeat background-position background-size background-origin background-clip background-attachment 以下所有示例中的 花花.jpg 图片的大小是 48×48 。 background-color 指定元素的背景色。 背景图片默

    2024年02月11日
    浏览(52)
  • CSS3渐变属性详解

    线性渐变 概念:线性渐变,指的是在一条直线上进行的渐变。在线性渐变过程中, 起始颜色会沿着一条直线按顺序过渡到结束颜色 语法: 渐变角度 线性渐变的“ 渐变角度 ”取值有两种: 一种是使用角度(单位为deg) 另一种是使用。 取值 属性值 对应角度 说

    2024年02月02日
    浏览(46)
  • css设置background背景视频

    通过CSS设置背景视频可以使用HTML5的video标签。具体步骤如下: 1.在HTML中添加video标签,并设置class为bg-video。 2.在video标签中添加source标签,用于指定视频文件的路径和类型。 3.在CSS中设置bg-video的样式,包括绝对定位、宽高等属性。 4.在CSS中设置z-index属性,确保视频在其他元

    2024年04月10日
    浏览(92)
  • CSS的background 背景图片自动适应元素大小,实现img的默认效果 background-size:100% 100%;

    CSS的background 背景图片自动适应元素大小,实现img的默认效果 background-size:100% 100%; 关键是 background-size:100% 100%; background-size:100% 100%; background-size:contain; 保持纵横比, 容器部分可能空白 background-size:cover; 保持纵横比, 图像可能指显示部分 background-size:100% 100%; 不保持纵横比, 背景图像

    2024年02月20日
    浏览(43)
  • CSS3 -- mix-blend-mode属性详解

    在上篇文章中,我们利用css的 mix-blend-mode 属性做了一个简单的文字颜色自适应背景颜色的效果,这篇文章我来解释一下这个属性的用法以及一些简单的案例。 mix-blend-mode 是一种 CSS 属性,它定义了一个元素的颜色如何与其父元素的颜色以及兄弟元素的颜色混合。它允许您创建

    2024年02月06日
    浏览(43)
  • CSS中如何实现元素的渐变背景(Gradient Background)效果?

    前端入门之旅:探索Web开发的奇妙世界 欢迎来到前端入门之旅!感兴趣的可以订阅本专栏哦!这个专栏是为那些对Web开发感兴趣、刚刚踏入前端领域的朋友们量身打造的。无论你是完全的新手还是有一些基础的开发者,这里都将为你提供一个系统而又亲切的学习平台。在这个

    2024年02月10日
    浏览(64)
  • CSS动画属性关键帧Keyframes详解:创建令人惊叹的动画效果

    CSS中的关键帧(Keyframes)是一种强大的工具,可用于创建各种动画效果,从简单的渐变到复杂的运动路径。通过定义关键帧的属性值和时间轴上的位置,我们可以实现令人惊叹的视觉效果。本文将详细介绍CSS动画属性关键帧Keyframes的使用方法,并提供相应的源代码示例。 关键

    2024年01月23日
    浏览(59)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包