Go语言视频零基础入门到精通

吴会 · 发表于 2011-7-29 21:04:12

答应应用纯色作为背景，也答应使用背景图像创建相称复杂的效果。

在这方面的能力远远在之上。

背景色

可以使用 background-color 属性为元素设置背景色。这个属性接受任何正当的颜色值。

这条规则把元素的背景设置为灰色：
[pre]p {background-color: gray;}[/pre]
假如您但愿背景色从元素中的文本向外少有延伸，只需增加一些内边距：
[pre]p {background-color: gray; padding: 20px;}[/pre]
如需查看本例的效果，可以切身试一试！

可认为所有元素设置背景色，这包括 body 一直到 em 和 a 等行内元素。

background-color 不能继续，其默认值是 transparent。transparent 有“透明”之意。也就是说，假如一个元素没有指定背景色，那么背景就是透明的，这样其祖先元素的背景才能可见。

背景图像

要把图像放入背景，需要使用 background-image 属性。background-image 属性的默认值是 none，表示背景上没有放置任何图像。

假如需要设置一个背景图像，必需为这个属性设置一个 URL 值：
[pre]body {background-image: url(/i/eg_bg_04.gif);}[/pre]
大多数背景都应用到 body 元素，不外并不仅限于此。

下面例子为一个段落应用了一个背景，而不会对文档的其他部门应用背景：
[pre]p.flower {background-image: url(/i/eg_bg_03.gif);}[/pre]
您甚至可认为行内元素设置背景图像，下面的例子为一个链接设置了背景图像：
[pre]a.radio {background-image: url(/i/eg_bg_07.gif);}[/pre]
如需查看上述例子的效果，可以切身试一试！

理论上讲，甚至可以向 textareas 和 select 等替代元素的背景应用图像，不外并不是所有用户代办代理都能很好地处理这种情况。

另外还要增补一点，background-image 也不能继续。事实上，所有背景属性都不能继续。

背景重复

假如需要在页面上对背景图像进行平铺，可以使用 background-repeat 属性。

属性值 repeat 导致图像在水平垂直方向上都平铺，就像以往背景图像的通常做法一样。repeat-x 和 repeat-y 分别导致图像只在水平或垂直方向上重复，no-repeat 则不答应图像在任何方向上平铺。

默认地，背景图像将从一个元素的左上角开始。请看下面的例子：
[pre]body
  {
  background-image: url(/i/eg_bg_03.gif);
  background-repeat: repeat-y;
  }
[/pre]
如需查看上例的效果，可以切身试一试。

背景定位

可以利用 background-position 属性改变图像在背景中的位置。

下面的例子在 body 元素中将一个背景图像居中放置：
[pre]body
  {
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:center;
  }
[/pre]
为 background-position 属性提供值有良多方法。首先，可以使用一些枢纽字：top、bottom、left、right 和 center。通常，这些枢纽字会成对泛起，不外也不老是这样。还可以使用长度值，如 100px 或 5cm，最后也可以使用百分数值。不同类型的值对于背景图像的放置稍有差异。

枢纽字

图像放置枢纽字最轻易理解，其作用如其名称所表明的。例如，top right 使图像放置在元素内边距区的右上角。

根据规范，位置枢纽字可以按任何顺序泛起，只要保证不超过两个枢纽字 - 一个对应水平方向，另一个对象垂直方向。

假如只泛起一个枢纽字，则以为另一个枢纽字是 center。

所以，假如但愿每个段落的中部上方泛起一个图像，只需声明如下：
[pre]p
  {
background-image:url('bgimg.gif');
background-repeat:no-repeat;
background-position:top;
  }
[/pre]
下面是等价的位置枢纽字：

单一枢纽字	等价的枢纽字
center	center center
top	top center 或 center top
bottom	bottom center 或 center bottom
right	right center 或 center right
left	left center 或 center left

百分数值

百分数值的表现方式更为复杂。假设你但愿用百分数值将图像在其元素中居中，这很轻易：
[pre]body
  {
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50% 50%;
  }
[/pre]
这会导致图像适当放置，其中央与其元素的中央对齐。换句话说，百分数值同时应用于元素和图像。也就是说，图像中描述为 50% 50% 的点（中央点）与元素中描述为 50% 50% 的点（中央点）对齐。

假如图像位于 0% 0%，其左上角将放在元素内边距区的左上角。假如图像位置是 100% 100%，会使图像的右下角放在右边距的右下角。

因此，假如你想把一个图像放在水平方向 2/3、垂直方向 1/3 处，可以这样声明：
[pre]body
  {
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:66% 33%;
  }
[/pre]
假如只提供一个百分数值，所提供的这个值将用作水平值，垂直值将假设为 50%。这一点与枢纽字类似。

background-position 的默认值是 0% 0%，在功能上相称于 top left。这就解释了背景图像为什么老是从元素内边距区的左上角开始平铺，除非您设置了不同的位置值。

长度值

长度值解释的是元素内边距区左上角的偏移。偏移点是图像的左上角。

好比，假如设置值为 50px 100px，图像的左上角将在元素内边距区左上角向右 50 像素、向下 100 像素的位置上：
[pre]body
  {
background-image:url('/i/eg_bg_03.gif');
background-repeat:no-repeat;
background-position:50px 100px;
  }
[/pre]
留意，这一点与百分数值不同，由于偏移只是从一个左上角到另一个左上角。也就是说，图像的左上角与 background-position 声明中的指定的点对齐。

背景联系关系

假如文档比较长，那么当文档向下动弹时，背景图像也会随之动弹。当文档动弹到超过图像的位置时，图像就会消失。

您可以通过 background-attachment 属性防止这种动弹。通过这个属性，可以声明图像相对于可视区是固定的（fixed），因此不会受到动弹的影响：
[pre]body
  {
  background-image:url(/i/eg_bg_02.gif);
  background-repeat:no-repeat;
  background-attachment:fixed
  }
[/pre]
如需查看上例的效果，可以切身试一试。

background-attachment 属性的默认值是 scroll，也就是说，在默认的情况下，背景会随文档动弹。

背景实例

设置背景颜色
本例演示如作甚元素设置背景颜色。

<>
<head>

<style type="text/">

body {background-color: yellow}
h1 {background-color: #00ff00}
h2 {background-color: transparent}
p {background-color: rgb(250,0,255)}

p.no2 {background-color: gray; padding: 20px;}

</style>

</head>

<body>

<h1>这是标题 1</h1>
<h2>这是标题 2</h2>
<p>这是段落</p>
<p class="no2">这个段落设置了内边距。</p>

</body>
</>

设置文本的背景颜色
本例颜色如何设置部门文本的背景颜色。

<>
<head>
<style type="text/">
span.highlight
{
background-color:yellow
}
</style>
</head>

<body>
<p>
<span class="highlight">这是文本。</span> 这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。这是文本。 <span class="highlight">这是文本。</span>
</p>
</body>
</>

将图像设置为背景
本例演示如何将图像设置为背景。

<>
<head>

<style type="text/">
body {background-image:url(/i/eg_bg_04.gif);}
</style>

</head>

<body></body>

</>

将图像设置为背景 2
本例演示如作甚多个元素同时设置背景图像。

<>
<head>

<style type="text/">
body {background-image:url(/i/eg_bg_04.gif);}
p.flower {background-image: url(/i/eg_bg_03.gif); padding: 20px;}
a.radio {background-image: url(/i/eg_bg_07.gif);  padding: 20px;}
</style>

</head>

<body>
<p class="flower">我是一个有花纹背景的段落。<a href="#" class="radio">我是一个有放射性背景的链接。</a></p>
<p><b>注释：</b>为了清楚地显示出段落和链接的背景图像，我们为它们设置了少许内边距。</p>
</body>

</>

如何重复背景图像
本例演示如何重复背景图像。

<>
<head>

<style type="text/">
body
{
background-image:
url(/i/eg_bg_03.gif);
background-repeat: repeat
}
</style>

</head>

<body>
</body>
</>

如何在垂直方向重复背景图像
本例演示如何垂直地重复背景图像。

<>
<head>

<style type="text/">
body
{
background-image:
url(/i/eg_bg_03.gif);
background-repeat: repeat-y
}
</style>

</head>

<body>
</body>
</>

如何在水平方向重复背景图像
本例演示如何水平地重复背景图像。

<>
<head>

<style type="text/">
body
{
background-image:
url(/i/eg_bg_03.gif);
background-repeat: repeat-x
}
</style>

</head>

<body>
</body>
</>

如何仅显示一次背景图像
本例演示如何仅显示一次背景图像。

<>
<head>

<style type="text/">
body
{
background-image: url('/i/eg_bg_03.gif');
background-repeat: no-repeat
}
</style>

</head>

<body>
</body>
</>

如何放置背景图像
本例演示如何在页面上放置背景图像。

<>
<head>
<style type="text/">
body
{
  background-image:url('/i/eg_bg_03.gif');
  background-repeat:no-repeat;
  background-attachment:fixed;
  background-position:center;
}
</style>
</head>

<body>
<body>
<p><b>提示：</b>您需要把 background-attachment 属性设置为 "fixed"，才能保证该属性在 Firefox 和 Opera 中正常工作。</p>
</body>
</body>
</>

如何使用%来定位背景图像
本例演示如何使用百分比来在页面上定位背景图像。

<>
<head>
<style type="text/">
body
{
background-image: url('/i/eg_bg_03.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 30% 20%;
}
</style>
</head>

<body>
<p><b>注释：</b>为了在 Mozilla 中实现此效果，background-attachment 属性必需设置为 "fixed"。</p>
</body>
</>

如何使用像素来定位背景图像
本例演示如何使用像素来在页面上定位背景图像。

<>
<head>
<style type="text/">
body
{
background-image: url('/i/eg_bg_03.gif');
background-repeat: no-repeat;
background-attachment:fixed;
background-position: 50px 100px;
}
</style>
</head>

<body>
<p><b>注释：</b>为了在 Mozilla 中实现此效果，background-attachment 属性必需设置为 "fixed"。</p>
</body>
</>

如何设置固定的背景图像
本例演示如何设置固定的背景图像。图像不会跟着页面的其他部门动弹。

<>
<head>
<style type="text/">
body
{
background-image:url(/i/eg_bg_02.gif);
background-repeat:no-repeat;
background-attachment:fixed
}
</style>
</head>

<body>
<p>图像不会随页面的其余部门动弹。</p>
<p>图像不会随页面的其余部门动弹。</p>
<p>图像不会随页面的其余部门动弹。</p>
<p>图像不会随页面的其余部门动弹。</p>
<p>图像不会随页面的其余部门动弹。</p>
<p>图像不会随页面的其余部门动弹。</p>
<p>图像不会随页面的其余部门动弹。</p>
<p>图像不会随页面的其余部门动弹。</p>
<p>图像不会随页面的其余部门动弹。</p>
<p>图像不会随页面的其余部门动弹。</p>
<p>图像不会随页面的其余部门动弹。</p>
<p>图像不会随页面的其余部门动弹。</p>
<p>图像不会随页面的其余部门动弹。</p>
<p>图像不会随页面的其余部门动弹。</p>
<p>图像不会随页面的其余部门动弹。</p>
<p>图像不会随页面的其余部门动弹。</p>
<p>图像不会随页面的其余部门动弹。</p>
<p>图像不会随页面的其余部门动弹。</p>
<p>图像不会随页面的其余部门动弹。</p>
<p>图像不会随页面的其余部门动弹。</p>
<p>图像不会随页面的其余部门动弹。</p>
<p>图像不会随页面的其余部门动弹。</p>
<p>图像不会随页面的其余部门动弹。</p>
<p>图像不会随页面的其余部门动弹。</p>
</body>

</>

所有背景属性在一个声明之中
本例演示如何使用简写属性来将所有背景属性设置在一个声明之中。

<>
<head>
<style type="text/">
body
{
background: #ff0000 url(/i/eg_bg_03.gif) no-repeat fixed center;
}
</style>
</head>

<body>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
<p>这是一些文本。</p>
</body>

</>

背景属性

属性	描述
background	简写属性，作用是将背景属性设置在一个声明中。
background-attachment	背景图像是否固定或者跟着页面的其余部门动弹。
background-color	设置元素的背景颜色。
background-image	把图像设置为背景。
background-position	设置背景图像的起始位置。
background-repeat	设置背景图像是否及如何重复。

javalearner · 发表于 2011-7-29 21:42:13

谢谢楼主分享。

		自动登录	找回密码
密码			立即注册

JAVA高级面试进阶视频教程	Java架构师系统进阶VIP课程	分布式高可用全栈开发微服务教程	Go语言视频零基础入门到精通	Java架构师3期(课件+源码)
Java开发全终端实战租房项目视频教程	SpringBoot2.X入门到高级使用教程	大数据培训第六期全套视频教程	深度学习（CNN RNN GAN）算法原理	Java亿级流量电商系统视频教程
互联网架构师视频教程	年薪50万Spark2.0从入门到精通	年薪50万！人工智能学习路线教程	年薪50万！大数据从入门到精通学习路线	年薪50万！机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程	深度学习数据分析基础到实战	最新黑马javaEE2.1就业课程	从 0到JVM实战高手教程	MySQL入门到精通教程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

Java亿级流量电商系统视频教程

年薪50万Spark2.0从入门到精通

年薪50万！人工智能学习路线教程

CSS 背景

浏览过的版块