3、CSS 背景

2021-10-21 13:48:12

CSS 属性定义背景效果:

background 　　　　　　　　　　简写属性，作用是将背景属性设置在一个声明中。

background-attachment 　　　　背景图像是否固定或者随着页面的其余部分滚动。

background-color 　　　　　　设置元素的背景颜色。

background-image　　　　　　把图像设置为背景。

background-position 　　　　　　设置背景图像的起始位置。

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

背景颜色：

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

1、十六进制 - 如："#ff0000"

2、RGB - 如："rgb(255,0,0)"

3、颜色名称 - 如："red"

默认情况下 background-image 属性会在页面的水平或者垂直方向重复平铺显示

如果图像只在水平方向平铺 (repeat-x), 页面背景会更好些 --->

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

如果你不想让图像平铺，你可以使用 background-repeat 属性,实例 --->

<style>
body
{
background-image:url(\'img_tree.png\');
background-repeat:no-repeat;
}
</style>
<body>
<h1>Hello World!</h1>
<p>runoob 背景图片实例。</p>
<p>背景图片只显示一次,但它打扰到读者!</p>
</body>

背景图像与文本显示在同一个位置，为了让页面排版更加合理，不影响文本的阅读，我们可以改变图像的位置实例 --->

<head>
<meta charset="utf-8"> 
<title>菜鸟教程(runoob.com)</title> 
<style>
body
{
background-image:url(\'img_tree.png\');
background-repeat:no-repeat;
background-position:right top;
margin-right:200px;
}
</style>

</head>

<body>
<h1>Hello World!</h1>
<p>背景图片不重复，设置 position 实例。</p>
<p>背景图片只显示一次，并与文本分开。</p>
<p>实例中还添加了 margin-right 属性用于让文本与图片间隔开。</p>
</body>

以上实例中我们可以看到页面的背景颜色通过了很多的属性来控制。
为了简化这些属性的代码，我们可以将这些属性合并在同一个属性中.
背景颜色的简写属性为 "background" --->

body 
{
background:#ffffff url(\'img_tree.png\') no-repeat right top;
}

当使用简写属性时，属性值的顺序为：

background-color 背景颜色

background-image 背景图片

background-repeat 背景图像重复效果

background-attachment 背景图像动态效果

background-position 背景图像起始位置

上一篇：使用CSS、HTML、JQuery编下一篇：css实战知识整理

网站建设

Css

3、CSS 背景