backgroundattachment属性值,css中backgroundattachment

http://www.itjxue.com  2023-01-06 20:59  来源:未知  点击次数: 

background attachment什么意思

background-attachment 属性设置背景图像是否固定或者随着页面的其余部分滚动。

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

取值: scroll | fixed | inherit

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

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

inherit: 继承

background 中有几个属性值,分别是什么

background : background-color || background-image || background-repeat || background-attachment || background-position

示例:

div { background: red no-repeat scroll 5% 60%; }

body { background: url("images/aardvark.gif") repeat-y; }

pre { background: url("images/aardvark.gif") top; }

caption { background: fuchsia; }

在css中background-attachment: fixed的意思是啥

在CSS中,首先需要理解background-attachment的意思是定义背景图片随滚动轴的移动方式,取值方式有:scroll | fixed | inherit,scroll: 随着页面的滚动轴背景图片将移动,fixed: 随着页面的滚动轴背景图片不会移动,inherit: 继承,具体的用法通过代码来理解:

!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" ""

html

head

meta http-equiv="Content-Type" content="text/html; charset=gb2312" /

titleCSS background-attachment 属性示例/title

style type="text/css" media="all"

body

{

background-image:url('/images/list-orange.png'); //图片的地址你可以去自行添加,这里只是假设的一种图片

background-attachment:fixed;

background-repeat:repeat-x;

background-position:center center;

position:absolute;

height:5000px;

}

/style

/head

body

p拖动滚动条,并且注意中间有一条橙色线并不会随滚动条的下移而上移./p

css中background简写属性

在CSS2.1里,background属性的简写方式包含五种属性值,从CSS3开始,又增加了3个新的属性值,加起来一共8个。

CSS2.1

background-color使用的背景颜色。

background-image使用的背景图像。

background-repeat如何重复背景图像。

background-attachment背景图像是否固定或者随着页面的其余部分滚动。

background-position背景图像的位置。

CSS3

background-size背景图片的尺寸。默认值:'auto'? 其他值:像素,百分比,contain,cover

background-origin背景图片的定位区域。 默认值:'padding-box'? ? ? ? ?'border-box' 、'content-box'(定义背景图片绘制的开始点)

background-clip背景的绘制区域。 默认值:'border-box'? ? ? 还有'padding-box'、'content-box'(定义背景绘制的开始点)

简写方式:

background:background-color background-image background-repeat background-attachment background-position / background-size background-origin background-clip

不设置的属性可以省略

background-Origin属性指定background-position属性应该是相对位置。

注意

1、如果背景图像background-attachment是"固定",background-origin属性没有任何效果。

2、background-origin 和background-clip很容易混淆,前者是对背景图片而言,后者是对背景而言。不是一个概念。clip默认值比origin默认值范围大,所以默认不会有裁剪效果,如果想设置裁剪,可以把origin范围设置的比clip大就好。比如:origin:'border-box',clip:'padding-box'或者'content-box'.

3、background-size中contain和cover的区别。

cover此时会保持图像的纵横比并将图像缩放成将完全覆盖背景定位区域的最小大小。完全覆盖,可能有图片显示不完整的情况。

contain此时会保持图像的纵横比并将图像缩放成将适合背景定位区域的最大大小。可能有空白区域

如下图一设置的contain,图二设置的cover

background-position属性是什么?

background-position属性是设置背景图像的起始位置。

这个属性设置背景原图像(由?background-image?定义)的位置,背景图像如果要重复,将从这一点开始。

需要把 background-attachment 属性设置为 "fixed",才能保证该属性在 Firefox 和 Opera 中正常工作。

注意事项

x%y% 第一个值是水平位置,第二个值是垂直。左上角是0%0%。右下角是100%100%。如果仅指定了一个值,其他值将是50%。默认值为:0%0%。

xposypos 第一个值是水平位置,第二个值是垂直。左上角是0。单位可以是像素(0px0px)或任何其他CSS单位。如果仅指定了一个值,其他值将是50%。你可以混合使用%和positions。

html背景只能铺满一个屏幕

你说的这个效果是背景固定,其实用html就可以办到的。

style?type="text/css"body?{background-image:url(../images/css_tutorials/mihoweb.jpg);?background-repeat:no-repeat;?background-attachment:fixed}?/style

这个HTML使用了CSS的 background-attachment 属性,将背景图片固定,不随内容滚动而滚动。

背景附着(background-attachment)属性有两个值。一个是scroll,表示随内容滚动而动;一个是fixed,表示固定不动,不受内容滚动影响。缺省值是scroll。

background-attachment要和background-image一起用。

这个HTML使用了CSS的background-attachment属性,将背景图片固定,不随内容滚动而滚动。

背景附着(background-attachment)属性有两个值。一个是scroll,表示随内容滚动而动;一个是fixed,表示固定不动,不受内容滚动影响。缺省值是scroll。

(责任编辑:IT教学网)

更多

推荐网络赚钱文章