这个背景图，被我设置了background设置透明度-attachment:fixed;属性，但是上面的部分被挡住了， 怎么调下来

来源：蜘蛛抓取(WebSpider) 时间：2016-10-23 11:07 标签： backgroundattachment
css background-attachment：fixed替代_百度知道在css中background-attachment: fixed的意思是啥_百度知道background-imageurl('list-orange.png')
background-attachmentfixed
background-repeatrepeat-x
background-positioncenter center
屏幕的背景图片为一条橙色线.随着滚动轴移动,橙色线的视觉位置不变.
CSS background-attachment 属性示例 -- 可以尝试编辑
5.5 CSS background-attachment 属性
教程中有什么不懂的地方？发现教程的错误！对教程有什么建议！快快联系猴子呀，:)CSS下背景属性background的使用方法
作者：佚名
字体：[ ] 来源：互联网 时间：01-05 23:15:04
背景属性是给网页添加背景色或者背景图所用的CSS样式，它的能力远远超于html之上。
背景颜色（background-color）
&&& CSS可以用纯色来作为背景，也可以将背景设置为透明,background相当于xhtml中的bgcolor。它的两个值：
&&& transparent（默认值，透明）
&&& color(指定的颜色，和文本颜色的设置方法相同)
示例：& body {background-color:}&&& h1 {background-color: #00ff00;}&&& h2 {background-color:}&&& p {background-color: rgb(0,0,255);}
背景图片（background-image）
&&& 用一张图片作为标签的背景可用到这个属性，如果背景颜色和背景图片都被定义了，背景图片会覆盖在背景颜色之上。示例：& body {background-image:url(../images/background.jpg);} &&& 或& &body style=&background-image:url(../images/background.jpg);&&
背景重复属性（background-repeat）
&&& 这个属性必须跟在background-image属性后使用，它决定图片背景的重复方法。如果使用了background-image后没有添加这个属性，默认情况它是横向纵向都重复的，它有四个属性值：
&&& repeat（默认值，重复，横向和纵向。）
&&& no-repeat（不重复）
&&& repeat-x（背景图片横向重复）
&&& repeat-y（背景图片纵向重复）
示例：& body {&&& background-image:url(../images/background.jpg); &&& background-repeat:repeat-y; /*垂直重复*/&&& }
背景位置属性(background-position)
&&& 这个属性也是跟在background-image属性后使用的，它决定背景图片的初始位置，它通常是以x与y坐标定位的，所以通常都取两个值，默认值是0% 0%。&&& 它按照水平、垂直方式，部署了8个属性值：
&&& 水平：left、center、right；
&&& 垂直：top、center、bottom；
&&& 垂直与水平综合：x-% y-%、x-pos y-pos。
&&& 前6个属性值都很简单，最后两个属性值乍一看会有些摸不到头脑。x-% y-%的意思是x轴的百分数和y轴的百分数，x-pos y-pos的意思是x轴的值和y轴的取值。示例：& p {&&& background-image:url(../images/background.jpg); &&& background-position:20px -30 &&& background-repeat:no- &&& } &&& div&& {background-image:url(../images/background.jpg);&&& background-position:50% 20%;&&& background-repeat:no-&&& }
背景附着属性(background-attachment)
&&& 这个属性依然要跟随background-image后面使用，它决定背景图片是跟随内容滚动，还是固定不动，它有两个属性值：
&&& scroll（默认值，背景图片跟随内容滚动。）
&&& fixed（背景图片固定，不跟随内容滚动。）
示例：.para6&& {background-image:url(../images/background.jpg); background-position:50% 20% ; background-repeat:no- background-attachment:}
背景属性(background)
&&& 和前几篇文章中提到的font属性使用方法一样，background也是综合缩写，书写顺序：& background:background-color background-image background-repeat background-attachment background-示例：.para7&& {background:#000000 url(../images/background.jpg); }.para8&& {background:url(../images/background.jpg) r }&&& 在网页的实际制作过程中，还需要注意网页的背景颜色和背景图片设置的许多细节问题，需要在实际应用中细心体会和钻研，以后我们再慢慢分析。
大家感兴趣的内容
12345678910
最近更新的内容前提是定义了background-image属性，然后用background-attachment来指明背景图的位置是固定于视口的，还是随着包含块移动的。可简单理解为定义背景图片随滚动轴的移动方式。
scrool:默认值，背景随页面滚动而移动，即背景和内容绑定。
fixed：背景图相对于视口固定，所以随页面滚动背景不动，相当于背景被设置在了body上。
local：背景图相对于元素内容固定，
inhert:继承，没什么说的。
该属性可以应用于任何元素。
一、scroll【背景图滚动】
设置background-attachment:scroll,背景图是相对于元素自身固定，内容动时背景图也动。附加到元素的border。
对于scroll，一般情况背景随内容滚动，但是有一种情况例外。
对于可以滚动的元素（设置为overflow:scroll的元素）。当background-attachment设置为scroll时，背景图不会随元素内容的滚动而滚动。
二、local【滚动元素背景图滚动】
对于可以滚动的元素（设置为overflow:scroll的元素）,设置background-attachment:local，则背景会随内容的滚动而滚动。
因为背景图是相对于元素自身内容定位，开始固定，元素出现滚动条后背景图随内容而滚动。
width: 200px;
height: 350px;
border: 1px solid red;
background-image: url(img/img_tree.png);
background-repeat: no-repeat;
background-attachment: local;
overflow: scroll;
line-height: 1.5;
1内容超出会出现滚动条
2内容超出会出现滚动条
3内容超出会出现滚动条
4内容超出会出现滚动条
5内容超出会出现滚动条
6内容超出会出现滚动条
7内容超出会出现滚动条
8内容超出会出现滚动条
9内容超出会出现滚动条
10内容超出会出现滚动条
11内容超出会出现滚动条
12内容超出会出现滚动条
13内容超出会出现滚动条
14内容超出会出现滚动条
15内容超出会出现滚动条
16内容超出会出现滚动条
17内容超出会出现滚动条
18内容超出会出现滚动条
19内容超出会出现滚动条
20内容超出会出现滚动条
三、fixed:【背景图静止】
背景图片相对于视口固定，就算元素有了滚动条，背景图也不随内容移动。
fixed用法如下：
background-image: url(img/cartooncat.png);
background-position: bottom left;
background-attachment: fixed;
background-repeat: no-repeat;
height: 1000px;
&h1&下拉看效果：&/h1&
或者看mozilla的。
这里我要强调一点我的看法：
给任何元素的背景图设置background-attachment:效果都是一样的，都是相对于视口，因为一个网页只有一个视口，该背景和元素已经没关系了，要说有关大概也只是元素不可见则背景图不可见。
而这个视口是什么呢？这里推荐一篇文章
四、多背景图background-attachment
也可以为多个背景图设置background-attachment
background-image: url("img1.png"), url("img2.png");
background-attachment: scroll, fixed;
五、资源链接
阅读(...) 评论()

我要回帖

更多关于 backgroundattachment 的文章

 

随机推荐