小白教程

 找回密码
 立即注册
小白教程 首页 系列教程 css系列教程 查看内容

CSS 背景

发布者: 小白教程

CSS 背景属性用于定义 HTML 元素的背景。

CSS 属性定义背景效果:

    1. background-color
    1. background-image
    1. background-repeat
    1. background-attachment
    1. background-position

背景颜色

  1. background-color
属性定义了元素的背景颜色。

页面的背景颜色使用在

  1. body
的选择器中:

实例

body {background-color:#b0c4de;}

CSS 中,颜色值通常以以下方式定义:

  • 十六进制 - 如:"#ff0000"
  • RGB - 如:"rgb(255,0,0)"
  • 颜色名称 - 如:"red"

以下实例中,

  1. h1
,
  1. p
, 和
  1. div
元素拥有不同的背景颜色:

实例

h1 {background-color:#6495ed;}
p {background-color:#e0ffff;}
div {background-color:#b0c4de;}

提示:你可以为所有元素设置背景色,包括

  1. body
一直到
  1. em
  1. a
等行内元素。

提示:

  1. background-color
不能继承,其默认值是
  1. transparent
。如果一个元素没有指定背景色,那么背景就是透明的,这样其父元素的背景才可见。


背景图像

  1. background-image
属性描述了元素的背景图像.

默认情况下,背景图像进行平铺重复显示,以覆盖整个元素实体。

页面背景图片设置实例:

实例

body {background-image:url('paper.gif');}

下面是一个例子是一个糟糕的文字和背景图像组合。文本可读性差:

实例

body {background-image:url('bgdesert.jpg');}



背景图像 - 水平或垂直平铺

如果需要在 HTML 页面上对背景图像进行平铺,可以使用 

  1. background-repeat
属性。

默认情况下

  1. background-image
属性会在页面的水平或者垂直方向平铺。

一些图像如果在水平方向与垂直方向平铺,这样看起来很不协调,如下所示: 

实例

body
{background-image:url('gradient2.png'); }

如果图像只在水平方向平铺

  1. (repeat-x)
, 页面背景会更好些:

实例

body
{background-image:url('gradient2.png');
background-repeat:repeat-x;}




12下一页
上一篇:CSS 创建下一篇:CSS Text 文本格式

Archiver|手机版|小黑屋|小白教程 ( 粤ICP备20019910号 )

GMT+8, 2024-11-24 14:58 , Processed in 0.016924 second(s), 18 queries .

Powered by Discuz! X3.4

© 2001-2017 Comsenz Inc. Template By 【未来科技】【 www.wekei.cn 】

返回顶部