二维码
搜索 ×

CSS 背景图像重复

  • 作者：图形开发学院
  • 更新时间：2023年11月01日
  • 阅读量：0
  • 收藏数：0

CSS 背景图像重复

CSS 背景图像重复

background-image：默认情况下，该属性在水平和垂直方向上重复图像。

有些图像应该只在水平或垂直方向上重复，否则它们看起来会很奇怪，就像这样：

1
body {  background-image: url("gradient_bg.png");}

如果上面的图像仅水平重复使用background-repeat: repeat-x;则背景将看起来更好：

1
2
body {  background-image: url("gradient_bg.png");  
  background-repeat: repeat-x;}

提示： 要垂直重复图像，请设置为background-repeat: repeat-y;

CSS background-repeat：不重复

background-repeat：属性还指定仅显示一次背景图像。

1
2
3
4
仅显示一次背景图像：

body {  background-image: url("img_tree.png");  
  background-repeat: no-repeat;}

在上面的示例中，背景图像与文本放置在同一位置。我们想改变图像的位置，这样它就不会 过多地扰乱文本。

CSS 背景位置

background-position：该属性用于指定背景图像的位置。

1
2
3
4
5
将背景图像放在右上角：

body {  background-image: url("img_tree.png");  
  background-repeat: no-repeat;  
  background-position: right top;}

CSS Background Repeat 和 Position 属性

属性 说明
background-position 设置背景图像的起始位置
background-repeat 设置背景图像的重复方式

推荐教程