CSS中background-attachment
CSS中background-attachment
CSS中background-attachmentCSS中background-attachment属性来指明背景图的位置是固定于视口的,还是随着包含块移动的。可简单理解为定义背景图片随滚动轴的移动方式。
前提是定义了background-image属性
一、background-attachment值
scrool:默认值,背景随页面滚动而移动,即背景和内容绑定,当页面的其余部分滚动时,背景图像不会移动。
fixed: 背景图相对于视口固定,当页面的其余部分滚动时,背景图像不会移动。
local: 背景图相对于元素内容固定。
inhert:规定应该从父元素继承 background-attachment 属性的设置。
(1)、scroll
设置background-attachment:scroll,背景图是相对于元素自身固定,内容动时背景图也动。
对于scroll,一般情况背景随内容滚动,但是有一种情况例外。
对于可以滚动的元素(设置为overflow:scroll的元素)。当background-attachment设置为scroll时,背景图不会随元素内容的滚动而滚动。
(2)、local
对于可以滚动的元素(设置为overflow:scroll的元素),设置background-attachment:local,则背景会随内容的滚动而滚动。
因为背景图是相对于元素自身内容定位,开始固定,元素出现滚动条后背景图随内容而滚动。
(3)、fixed
背景图片相对于视口固定,就算元素有了滚动条,背景图也不随内容移动。
二、background-attachment 网页背景固定的几种方式
1、右上固定:
<style type="text/css">
body{
background-image:url("背景url");
background-position:100% 0%;
background-repeat:no-repeat;
background-attachment:fixed;}
</style>
2、右下固定
body {
background-image:url("5.jpg");
background-position:100% 100%;
background-repeat:repeat-y;
background-repeat:no-repeat;
background-attachment:right bottom;
}
3、左上
body{
background-image:url("背景url");
background-repeat:no-repeat;
background-attachment:fixed;
}
4、左下
body{
background-image:url("背景url");
background-position:0% 100%;
background-repeat:no-repeat;
background-attachment:fixed;
}
5、正中
body{
background-image:url("背景url");
background-repeat:no-repeat;
background-attachment:fixed;
background-position:center ;
}
6、右边
body{
background-image:url("背景url");
background-position:100% 0%;
background-repeat:repeat-y;
background-attachment:fixed;
}
7、左边
body{
background-image:url("背景url");
background-repeat:repeat-y;
background-attachment:fixed;
}
8、上边
body{
background-image:url("背景url");
background-repeat:repeat-x;
background-attachment:fixed;
}
9、下边
body{
background-image:url("背景url");
background-position:bottom;
background-repeat:repeat-x;
background-attachment:fixed;
}
- css3实现120度的箭头(使用css实现任意大小、任意方向和任意角度的箭头示例)
- css3渐变样式怎么用(CSS3 background-image颜色渐变的实现代码)
- class对应的css(CSS的class与id常用的命名规则)
- css语言是干嘛的(Css预编语言及区别详解)
- css sprites介绍
- css鼠标点击效果怎么样(CSS实现鼠标滑过鼠标点击代码写法)
- css隐藏div(CSS控制DIV层显示和隐藏的实现方法)
- html表单星号怎么标记(使用CSS 给表单必选项添加星号的实现方法)
- css3各个动画效果(使用css3制作齿轮loading动画效果)
- css3过渡动画制作(CSS3中动画属性transform、transition和animation属性的区别)
- css3动画360循环旋转(利用纯CSS3实现文字向右循环闪过效果实例可用于移动端)
- css3表单怎么设置大小(CSS3美化表单控件全集)
- cssdisplay覆盖规律(css解决display:inline-block;产生的缝隙间隙的方法)
- css3渐变背景图片(css3实现背景图片半透明内容不透明的方法示例)
- html5表单实例(使用HTML5和CSS3表单验证功能)
- html导航条下拉菜单代码(Html+Css+Jquery实现左侧滑动拉伸导航菜单栏的示例代码)
- 散文 八月再见,九月,我在风中等你(散文八月再见九月)
- 8月再见 9月你好(8月再见)
- 魔兽世界 设计师爆料,原始版本并无PVP,跨阵营属于返璞归真(魔兽世界设计师爆料)
- 吐槽完《弧光大作战》之后,我们和设计师聊了聊魔兽首款手游的立项初衷和未来(吐槽完弧光大作战之后)
- 魔兽争霸3自定义战役少年杰雷 2(魔兽争霸3自定义战役少年杰雷)
- 今日菜价 芥兰涨幅最高 1.33 ,花菜降幅最高 3.10(今日菜价芥兰涨幅最高)
热门推荐
排行榜
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9