首页 / CSS / cssbackground-attachment属性的使用与定义

cssbackground-attachment属性的使用与定义

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了cssbackground-attachment属性的使用与定义，小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含2699字，纯文字阅读大概需要4分钟。

内容图文

background-attachment -- 定义背景图片随滚动轴的移动方式

取值: scroll | fixed | inherit

scroll: 随着页面的滚动轴背景图片将移动

fixed: 随着页面的滚动轴背景图片不会移动

inherit: 继承

初始值: scroll

继承性: 否

适用于: 所有元素

background:背景.attachment:附着.

示例

body 
{	
background-image:url('list-orange.png');	
background-attachment:fixed;	
background-repeat:repeat-x;	
background-position:center center;
}

屏幕的背景图片为一条橙色线.随着滚动轴移动,橙色线的视觉位置不变.

CSS background-attachment 属性示例 -- 可以尝试编辑

CSS background-attachment 属性示例

视差滚动（Parallax Scrolling）是指让多层背景以不同的速度移动，形成立体的运动效果，带来非常出色的视觉体验。作为今年网页设计的热点趋势，越来越多的网站应用了这项技术。

不明白的可以先看看eBay上的效果：http://www.ebay.com/new/

其实就是固定背景不让它随着滚动轴移动，但包含背景的容器是跟着滚动的，所造成的视觉差异看起来就像跟转换场景一样。（这个解释别嫌混乱…）

在CSS中定义背景滚动方式的属性是backgroud-attacthment

background-attachment -- 定义背景图片随滚动轴的移动方式

取值: scroll | fixed | inherit

scroll: 默认值。背景图像会随着页面其余部分的滚动而移动。

fixed: 当页面的其余部分滚动时，背景图像不会移动。

inherit: 规定应该从父元素继承 background-attachment 属性的设置。

初始值: scroll

继承性: 否

适用于: 所有元素

浏览器的支持性：

测试了chrome,opera,safari,firefox,ie7-8都是可以的，所以就是说IE6下不行~

在IE6下使用这个属性，需要把background-attachment:fixed放置于body或html当中，就是说你说在其它标签里面是没用。上面的w3c里可以看得到效果就是因为它是放在body里的。

这是我自己做的一个demo，点击可以下载

代码：

<!doctype html>
<html>
    <head>
        <meta charset="utf-8">
        <title>滚动视觉差示例</title>
        <style>
            *{
                padding:0;
                margin:0
            }
            body{
                text-align:center;
                background-attachment:fixed;
            }
            #main{
                width: 1280px;
                margin:auto
            }
            .header{
                background:#fff;
                padding: 10px 0
            }
            .bg-attachment{
                background:url(6.jpg) center center no-repeat;
                box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -webkit-box-shadow:0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -moz-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -o-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                -ms-box-shadow: 0 7px 18px #000000 inset,0 -7px 18px #000000 inset;
                background-attachment:fixed;
            }
            .bg-attachment .shadow{
                width:80%;
                height:700px;
                overflow:hidden;
                margin:auto;
            }
            .div2{
                background:url(qingz.jpg) center center no-repeat;
                background-attachment:fixed;
            }
        </style>
    </head>
    <body>
        <div id="main">
            <div class="header">
                <img src="5.jpg">
            </div>
            <div class="bg-attachment">
                <div class="shadow"></div>
            </div>
            <div class="header">
                <img src="qi.jpg">
            </div>
            <div class="bg-attachment div2">
                <div class="shadow"></div>
            </div>
        </div>
    </body>
</html>

以上就是css background-attachment属性的使用与定义的详细内容，更多请关注Gxl网其它相关文章！

内容总结

以上是互联网集市为您收集整理的cssbackground-attachment属性的使用与定义全部内容，希望文章能够帮你解决cssbackground-attachment属性的使用与定义所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

扫描二维码推送至手机访问。

本文链接：https://qyyshop.com/info/413467.html

来源：【匿名】