封面图-怎样用CSS控制网页背景片

2021-04-26 08:09 admin
--------

封面图

-------

大家在浏览一些网站的情况下,有时候见面到这样的网站制作实际效果:网站內容随翻转条翻转,可是网页页面情况照片不翻转,那末这样的实际效果是如何完成的呢?这类实际效果完成就离不开css的相互配合,今日大家就来一起学习培训一下CSS操纵网页页面情况照片的各种各样款式表。

在网页页面前端开发设计方案中CSS充分发挥着十分关键的功效,如今伴随着总流量的不断升級,可以适用的css英语的语法也愈来愈多,因此将来的网页页面设计方案实际效果也必定会愈来愈好看。

情况反复(background-repeat)

情况图像一般是平铺在情况上的,对吗?错。 运用这项CSS特性,你能够操纵是不是将其平铺。

P { background-repeat: no-repeat; background-image: url(/webmonkey/ 98/15/stuff3a/background.gif) }

上述标准运用于全部段落。大家之前用过的GIF 图像出現在文本后边,但因为大家运用了不重 复图像(no-repeat)标准,因此该图像不会重 复平铺在全部段落后边,它只显示信息一幅独立的 图像。

假如你只想让图像竖直或水平方向平铺,你 能够应用repeat-x将其水平平无奇铺,用repaet-y 将其竖直平铺。而repeat主要参数值则将图像从水 平静竖直两个方向平铺。

固定不动情况(background-attachment)

在HTML中,情况图像一般会随网页页面的翻转而一 起翻转。但运用CSS的固定不动情况(background) 特性,你能够创建不翻转的情况图像,网页页面滚 动时,情况图像能够维持固定不动。

BODY { background-attachment: fixed; background-image: url(/webmonkey/98/ 15/stuff3a/background.gif) }

该特性只用于网页页面情况,即标识内设置 的情况图像。

其主要参数有两种挑选:

scroll指情况图像随文本內容一起翻转, 即一般所见的方法。
fixed指文本翻转时,情况图像维持固 定。
情况精准定位(background-position)

你能够设置将情况插在甚么部位显示信息。

P { background-position: center bottom; background-image: url (background.gif) }

当上述CSS标准运用于本段文本时,情况图像 将在本段的中下部刚开始显示信息并向右平铺。

假如你看不到上述的显示信息实际效果,则表明你所使 用的访问器是Communicator,它不适用情况定 位。

设置部位的3种方式:

重要字主要参数(Keyword values)
重要字设置方式简单易用:

top将情况图像同市场前景要素的顶部 对齐。
bottom将其同市场前景要素的底部对 齐。
left将其同左侧对齐。
right将其同右侧对齐。
center将其水平垂直居中(假如应用在 另外一重要字前面)或竖直垂直居中(如 果用在另外一重要字后边)。
长度主要参数
长度主要参数能够应用你对情况图像的部位 作出更精准的操纵。你能够设置水平静 竖直精准定位起始点,例:

P { background-position: 70px 10px; background-repeat: repeat-y; background-image: url (background.gif) }

本段显示信息了上述标准的实行实际效果。IE适用 这类特性,将GIF图像设定在从左上角起 水平70象素,竖直10象素的部位。因为我 设定了 background-repeat: repeat-y, GIF图像将在文本后竖直平铺。

你能够应用大家之前学过的任何一种长度 企业,例如pixels, points, inches, ems等。

(IE 3不适用长度企业显示信息这类实际效果)

占比值(Percentage values)
你还能够应用占比值设置情况图像的位 置,例:

P { background-position: 75% 50%; background-image: url (background.gif) }

当这条CSS标准运用于本段时,情况图像 从水平间距段落右端70%,竖直间距段落 顶部50%的部位显示信息。假如你再次调剂浏 览器对话框的尺寸,使得段落的显示信息尺寸变 化,情况图像的部位也相应产生转变。在 本段上不会产生这样的转变,由于本段的 尺寸是固定不动的,不会伴随着对话框尺寸的调剂 而转变。

 

---------

封面图

------------