21xrx.com
2024-12-19 15:07:09 Thursday
登录
  

CSS 背景

CSS背景属性用于定义元素的背景效果.

CSS背景属性:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

背景颜色

background-color属性指定元素的背景色.

页面的背景色设置如下:

例子

使用CSS时,使用颜色最常见的方法是

  • 一个有效的颜色名称,类似于"red".
  • 像"#ff0000"一样的十六进制值
  • rgb值"rgb(255,0,0)"
  • rgba值"rgba(255,0,0,.5)"

有关颜色值的完整列表,请查看CSS颜色值

在下面的示例中<h1>、<p>和<div>元素具有不同的背景色:

例子

背景图片

background-image属性指定要用作元素背景的图像.

默认情况下,图像是重复的,因此它覆盖了整个元素.

可以这样设置页面的背景图像:

例子

下面是一个糟糕的文本和背景图像组合的例子.文字难以看清楚:

例子

注意:使用背景图像时,请使用不干扰文本的图像.

背景图像-水平或垂直重复

默认情况下,背景图像属性在水平和垂直两个方向重复图像.

有些图像只能水平或垂直地重复,否则它们看起来会很奇怪,如下所示:

例子

如果上面的图像只是水平重复(background-repeat:repeat-x;),背景看起来会更好:

例子

注意:在垂直方向对图片进行重复 - background-repeat:repeat-y;

背景图像 - 设置位置和不重复

如果只显示图片一次,也是用background-repeat属性指定:

例子

在上面的例子中背景图像显示在与文本相同的位置.我们想要改变图像的位置,这样它就不会对文本造成太大的干扰.

图像的位置是用background-position属性指定的:

例子

背景图片 - 固定位置

要固定背景图像(不会与页面的其余部分一起滚动)请使用background-attachment属性:

例子

背景 - 简写属性

为了缩短代码,可以在一个属性中指定所有背景属性.这被称为简写属性。

背景的简写属性是background:

例子

当使用简写属性时,属性值的顺序是:

  • background-color
  • background-image
  • background-repeat
  • background-attachment
  • background-position

如果其中一个属性值丢失,只要其他属性值是按此顺序排列的就没问题.

全部的CSS背景属性

属性描述
  
  

评论区

{{item['qq_nickname']}}
()
回复
回复
21技术    www.21xrx.com 备案号:蜀ICP备17043188号-2