`

背景重复

    博客分类:
  • CSS
阅读更多

  • CSS background-repeat 属性

[url href="http://www.w3school.com.cn/css/css_reference.asp"]参考手册[/url]

    [定义和用法

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

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

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

    从原图像开始重复,原图像由 background-image 定义,并根据 background-position 的值放置。]

实例

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

    [浏览器支持

    所有浏览器都支持 background-repeat 属性。

    注释:任何版本的 Internet Explorer (包括 IE8)都不支持属性值 "inherit"。

    ][list]
    [背景定位

    可以利用 background-position 属性改变图像在背景中的位置。

    下面的例子在 body 元素中将一个背景图像居中放置:]
提示和注释

提示:背景图像的位置是根据 background-position 属性设置的。如果未规定 background-position 属性,图像会被放置在元素的左上角。

  • 可用的值
  • 值                描述
  • repeat 默认。背景图像将在垂直方向和水平方向重复。
  • repeat-x 背景图像将在水平方向重复。
  • repeat-y 背景图像将在垂直方向重复。
  • no-repeat 背景图像将仅显示一次。
  • inherit 规定应该从父元素继承 background-repeat 属性的设置。



连接
http://www.w3school.com.cn/css/pr_background-repeat.asp
分享到:
评论

相关推荐

    Cocos2d-X背景重复贴图

    ### Cocos2d-X背景重复贴图详解 #### 一、背景介绍 Cocos2d-X是一款非常流行的跨平台游戏开发框架,支持多种语言(如C++、Lua、JavaScript),并广泛应用于移动游戏开发领域。在游戏开发过程中,背景的设计与实现...

    曹鹏CSS视频教程-25.背景重复 1.rar

    背景重复 1.rar”,这是一份专门讲解CSS(Cascading Style Sheets)背景重复特性的教学资源。CSS是网页设计不可或缺的一部分,它使得网页的布局和样式控制变得更为灵活和精细,对于任何想要成为顶级网页设计师的人来...

    web开发中CSS背景重复和背景定位及关键字的介绍.docx

    本篇文章将深入探讨CSS中的背景重复和背景定位,以及相关的关键字使用。 首先,我们来了解一下背景重复(Background Repeat)。这个特性允许开发者指定背景图像如何在元素区域内平铺。`background-repeat`属性提供...

    Flex模仿HTML的CSS样式表中的背景重复

    用于模仿HTML的CSS样式表中的背景重复显示功能

    曹鹏CSS视频教程-26.背景重复 2.rar

    背景重复 2.rar" 是一个关于CSS(Cascading Style Sheets)的教程,由知名讲师曹鹏主讲,专注于讲解CSS中的背景重复属性。这个教程可能适合那些希望提升网页设计技能,尤其是对CSS感兴趣的初学者和网页设计师。 ...

    css代码添加背景图片常用代码

    - `inherit`: 继承父元素的背景重复方式。 - `no-repeat`: 不重复背景图片。 - `repeat`: 在水平和垂直方向上重复背景图片(这是默认值)。 - `repeat-x`: 只在水平方向上重复背景图片。 - `repeat-y`: 只在垂直方向...

    800张网页背景素材

    同时,还可以通过CSS的背景定位(background-position)和背景重复(background-repeat)属性来控制背景的显示位置和重复方式,增加设计的灵活性。 对于响应式设计,网页背景的选择也至关重要。为了保证在不同设备...

    div css background背景

    3. **背景重复**:`background-repeat`控制图片是否重复显示。可选值有`repeat`(默认,水平和垂直方向重复)、`no-repeat`(不重复)、`repeat-x`(只在水平方向重复)和`repeat-y`(只在垂直方向重复)。 4. **...

    CSS视频教程设置网页背景

    这节课的重点是利用CSS来美化网页,通过控制背景色、背景图片、背景重复和定位等属性,为网页增添视觉吸引力。 首先,我们要了解CSS中的`background-color`属性。这个属性用于设定元素的背景颜色。例如,如果你想要...

    flex 背景图片重复的组件库

    flex 背景图片重复的组件库 类似HTML的CSS样式表中的背景重复

    css background之设置图片为背景技巧.docx

    CSS中的`background`属性是一个非常重要的样式规则,用于设置元素的背景效果,包括背景颜色、背景图像、背景重复方式、背景是否固定以及背景位置等。这个属性允许开发者在一个声明中控制多个背景属性,大大简化了CSS...

    背景不随滚动条动

    背景重复background-repeat body { background-image: url(../images/css_tutorials/background.jpg); background-repeat: repeat-y; } 这个HTML使用了CSS的background-repeat属性,使背景图片竖向重复...

    21.3 CSS 背景属性

    3. **背景重复 (background-repeat)** - `background-repeat`决定背景图像是否及如何重复。可选值有`repeat`(水平和垂直方向重复)、`no-repeat`(不重复)、`repeat-x`(仅水平方向重复)和`repeat-y`(仅垂直...

    网页背景图片网页背景图片

    4. **背景重复与定位**:CSS中的`background-repeat`属性控制背景图片是否重复。`no-repeat`不重复,`repeat-x`沿水平方向重复,`repeat-y`沿垂直方向重复,`repeat`则在两个方向上都重复。`background-position`...

    CSS背景详解

    本文将深入探讨CSS背景的各个方面,包括背景颜色、背景图像、背景重复以及背景定位。 首先,我们可以使用`background-color`属性为元素设置背景颜色。这个属性接受各种颜色值,如名称、十六进制、RGB、RGBA等。例如...

    头歌教学实践平台 Web前端开发基础 CSS-背景样式

    3. **背景重复**:`background-repeat`控制背景图像如何在元素内重复。可选值包括`repeat`(水平和垂直重复)、`no-repeat`(不重复)、`repeat-x`(仅水平重复)和`repeat-y`(仅垂直重复)。 4. **背景位置**:`...

    CSS背景.rar

    三、背景重复与定位 通过`background-repeat`属性控制背景图像的重复方式。它可以是`repeat`(默认,图像在水平和垂直方向上重复)、`no-repeat`(图像不重复)、`repeat-x`(图像只在水平方向重复)或`repeat-y`...

    背景特效 html网页特效

    - **背景重复**:`background-repeat`属性控制背景图像是否重复。例如,`background-repeat: no-repeat;`可使背景图片只显示一次,不进行平铺。 - **背景裁剪与定位**:`background-size`属性可以调整背景图片的...

    css 背景图片

    背景重复 `background-repeat` `background-repeat` 属性控制背景图像的重复方式。默认情况下,图像会水平和垂直重复。但可以通过设置`no-repeat`、`repeat-x`或`repeat-y`来改变这种行为,分别表示图像不重复、仅...

    CSS在背景设计中的应用

    本文将深入探讨CSS在背景设计中的应用,包括背景颜色、背景图像、背景重复、背景定位、以及背景关联等关键属性。 首先,我们可以使用`background-color`属性为元素设置背景色。例如,`p {background-color: gray;}`...

Global site tag (gtag.js) - Google Analytics