关于css中的background属性

时间:2009-06-24 18:37:41

标签: css background

背景:#777777无重复滚动0 0;

它包含的5个属性是背景色,背景图像,背景重复,背景附件和背景位置。

但我不明白背景附件和背景位置是什么意思?

有人可以解释一下吗?

编辑:如果背景图片没有,背景重复,背景附件和背景位置无用吗?

7 个答案:

答案 0 :(得分:4)

如果您曾经看过一个网页,页面上的文字会滚动滚动条,但背景仍保持静止,那就是

background-attachment: fixed;

背景位置定义了如何将图像定位在元素背景中。例如,如果您有一个小阴影图像,只应沿元素的下边缘重复,您可以使用:

background-repeat: repeat-x;
background-position: bottom left;

或者,如果你有一个图像,你只想显示在元素的右下角:

background-position: bottom right;

background-position也接受以下格式的像素值:

background-position: xpos ypos

用于更精细的谷物控制。

答案 1 :(得分:1)

答案 2 :(得分:1)

W3Schools对这些元素有很好的解释:

background-attachment:确定背景是固定的还是随页面滚动。

background-position:确定背景相对于页面的位置(值顶部中心右下角,像素值等)< / p>

答案 3 :(得分:1)

  

background-attachment property设置背景图片是固定的还是与页面的其余部分一起滚动。

  • 滚动
    • 背景图片与页面的其余部分一起滚动。这是默认的
  • 固定
    • 背景图片已修复
  • 继承
    • 指定应从父元素
    • 继承背景附件属性的设置
  

background-position property设置背景图片的起始位置。

     

注意:要在Firefox和Opera中使用此功能,必须将background-attachment属性设置为“fixed”。

答案 4 :(得分:1)

背景附件指定背景是否与网页一起滚动。

background-attachment:fixed;会修复背景,所以即使用户向下滚动网页,背景也不会移动。

background-attachment:滚动;会使背景滚动页面。

此处有更多信息:http://www.w3schools.com/Css/pr_background-attachment.asp

背景位置需要2个参数; x位置和y位置。它指定开始显示原始背景图像的位置。原点位于容器的左上角。

此处有更多信息:http://www.w3schools.com/css/pr_background-position.asp

答案 5 :(得分:1)

From W3 background-attachment

  

背景附件属性   设置是否为背景图像   固定或滚动与其余的   页。

让我们说你有一张背景图片,like here(看看漂亮的山脉。)

当background-attachment属性设置为“fixed”时,滚动页面时,背景仍然是固定的。页面内容滚动,但背景图片不滚动。

this page比较。看到两侧涂鸦的背景?向下滚动时,这些图纸也会随页面滚动。这是“滚动”选项的一个示例 - 这是您在发布的CSS片段中所拥有的。

答案 6 :(得分:0)

background-position: is used to define the anchor point of the image on the screen like top left  or bottom right

background-attachment defines whether the background image will scroll with the contents