CSS背景实验1——CSS实验室

我们在CSS入门教程中已经简单的了解了CSS的背景属性。这里我们通过连续的实例进一步深入我们对CSS背景的了解。首先,我们来看看最简单背景颜色属性——"background-color"。

背景颜色

背景颜色属性用来设置某个HTML元素的背景颜色属性,我们可以通过几种方式指定颜色,其中最简单的一种就是直接使用颜色的英文名称,下面我们就使用这种方法来设置背景颜色。其它指定颜色的方法将在下一节介绍。

点击下面的按钮,就会设置前面的CSS语句,选择器是一个用来测试的div。我们可以看到,设置了第一条CSS语句"background-color:pink;"之后,该div的背景变成了粉色。而设置第二条CSS语句之后,div背景色又回复了透明,露出了网页的白色背景。

background-color:pink;

background-color:transparent;

下面我们可以在众多的颜色名称中选择一个来设置该测试div的背景颜色,选定之后点击“设置背景颜色”按钮即可。我们会发现,有些背景颜色会造成文字不易识别,甚至可能让文字完全淹没在背景中。

background-color:

 

背景图片

我们同样可以利用CSS为网页添加背景图片,这是通过CSS的"background-image"实行实现的。点击下面的第一个按钮就可以为网页设置背景图片,指定背景图片需要给出图片的url。点击第二个按钮则会执行CSS语句"background-image:none;",取消背景图片。

background-image:url(../../images/logo.gif);

background-image:none;


返回:CSS实验室 CSS入门 首页