CSS语法的背景重复

 我来答
若华寒洛行机11
2016-05-30 · 超过62用户采纳过TA的回答
知道答主
回答量:174
采纳率:100%
帮助的人:117万
展开全部

如果需要在页面上对背景图像进行平铺,可以使用 background-repeat 属性。
属性值 repeat 导致图像在水平垂直方向上都平铺,就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复,no-repeat 则不允许图像在任何方向上平铺。
默认地,背景图像将从一个元素的左上角开始。请看下面的例子:
body { background-image: url(/i/eg_bg_03.gif); background-repeat: repeat-y; }背景定位
可以利用 background-position 属性改变图像在背景中的位置。
下面的例子在 body 元素中将一个背景图像居中放置:
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:center; }为 background-position 属性提供值有很多方法。首先,可以使用一些关键字:top、bottom、left、right和 center。通常,这些关键字会成对出现,不过也不总是这样。还可以使用长度值,如 100px 或5cm,最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。 图像放置关键字最容易理解,其作用如其名称所表明的。例如,top right 使图像放置在元素内边距区的右上角。
根据规范,位置关键字可以按任何顺序出现,只要保证不超过两个关键字 - 一个对应水平方向,另一个对象垂直方向。
如果只出现一个关键字,则认为另一个关键字是 center。
所以,如果希望每个段落的中部上方出现一个图像,只需声明如下:
p { background-image:url('bgimg.gif'); background-repeat:no-repeat; background-position:top; }下面是等价的位置关键字: 单一关键字 等价的关键字 center center center top top center 或 center top bottom bottom center 或 center bottom right right center 或 center right left left center 或 center left 百分数值的表现方式更为复杂。假设你希望用百分数值将图像在其元素中居中,这很容易:
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:50% 50%; }这会导致图像适当放置,其中心与其元素的中心对齐。换句话说,百分数值同时应用于元素和图像。也就是说,图像中描述为 50% 50% 的点(中心点)与元素中描述为 50% 50% 的点(中心点)对齐。
如果图像位于 0% 0%,其左上角将放在元素内边距区的左上角。如果图像位置是 100% 100%,会使图像的右下角放在右边距的右下角。
因此,如果你想把一个图像放在水平方向 2/3、垂直方向 1/3 处,可以这样声明:
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:66% 33%; }如果只提供一个百分数值,所提供的这个值将用作水平值,垂直值将假设为 50%。这一点与关键字类似。
background-position的默认值是 0% 0%,在功能上相当于 top left。这就解释了背景图像为什么总是从元素内边距区的左上角开始平铺,除非您设置了不同的位置值。 长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。
比如,如果设置值为 50px 100px,图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上:
body { background-image:url('/i/eg_bg_03.gif'); background-repeat:no-repeat; background-position:50px 100px; }注意,这一点与百分数值不同,因为偏移只是从一个左上角到另一个左上角。也就是说,图像的左上角与 background-position 声明中的指定的点对齐。

育知同创教育
2016-10-10 · 百度知道合伙人官方认证企业
育知同创教育
1【专注:Python+人工智能|Java大数据|HTML5培训】 2【免费提供名师直播课堂、公开课及视频教程】 3【地址:北京市昌平区三旗百汇物美大卖场2层,微信公众号:yuzhitc】
向TA提问
展开全部

CSS语法的背景重复是用repeat属性。

定义和用法

background-repeat 属性设置是否及如何重复背景图像。

默认地,背景图像在水平和垂直方向上重复。

详细说明

background-repeat 属性定义了图像的平铺模式。

有如下css代码:

body
 {
 background-image: url(stars.gif);
 background-repeat: repeat-y;
 }

完整实例:

<html>

<head>

<style type="text/css">

body

background-image: 

url(/i/eg_bg_03.gif);

background-repeat: repeat

}

</style>

</head>

<body>

</body>

</html>

运行效果;



已赞过 已踩过<
你对这个回答的评价是?
评论 收起
空白说
2016-06-07 · TA获得超过407个赞
知道小有建树答主
回答量:757
采纳率:50%
帮助的人:196万
展开全部
目前能够对背景进行的操作就是
1、横向平铺(background-repeat:repeat-x)
2、纵向平铺(background-repeat:repeat-y)
3、完全平铺(background-repeat:repeat/不填写)
4、背景图大小(background-size)
5、背景定位区域(background-origin)
6、多重背景图片(background-image:url(bg_flower.gif),url(bg_flower_2.gif))等
不知道你说的是不是这个意思。如果不是,请谅解!
已赞过 已踩过<
你对这个回答的评价是?
评论 收起
收起 更多回答(1)
推荐律师服务: 若未解决您的问题,请您详细描述您的问题,通过百度律临进行免费专业咨询

为你推荐:

下载百度知道APP,抢鲜体验
使用百度知道APP,立即抢鲜体验。你的手机镜头里或许有别人想知道的答案。
扫描二维码下载
×

类别

我们会通过消息、邮箱等方式尽快将举报结果通知您。

说明

0/200

提交
取消

辅 助

模 式