今日学习内容:
第一天 | 第二天 | 第三天 | 第四天 | 第五天 | |
所花时间(小时) | 4.5 | 6 | |||
代码量(行) | 500 | 300 | |||
博客量(篇) | 1 | 1 | |||
了解到的知识点 |
html的多场景应用练习 |
CSS背景图像、背景重复 |
CSS 背景图像
CSS 背景图像
background-image 属性指定用作元素背景的图像。
默认情况下,图像会重复,以覆盖整个元素。
实例
页面的背景图像可以像这样设置:
body {
background-image: url("paper.gif");
}
实例
本例展示了文本和背景图像的错误组合。文字难以阅读:
body {
background-image: url("bgdesert.jpg");
}
注意:使用背景图像时,请使用不会干扰文本的图像。
还可以为特定元素设置背景图像,例如 <p> 元素:
实例
p {
background-image: url("paper.gif");
}
CSS background-repeat(背景重复)
默认情况下,background-image 属性在水平和垂直方向上都重复图像。
某些图像应只适合水平或垂直方向上重复,否则它们看起来会很奇怪,如下所示:
实例
body {
background-image: url("gradient_bg.png");
}
如果上面的图像仅在水平方向重复 (background-repeat: repeat-x;),则背景看起来会更好:
实例
body {
background-image: url("gradient_bg.png");
background-repeat: repeat-x;
}
提示:如需垂直重复图像,请设置 background-repeat: repeat-y;
CSS background-repeat: no-repeat
background-repeat 属性还可指定只显示一次背景图像:
实例
背景图像仅显示一次:
body {
background-image: url("tree.png");
background-repeat: no-repeat;
}
在上例中,背景图像与文本放置在同一位置。我们想要更改图像的位置,以免图像过多干扰文本。
CSS background-position
background-position 属性用于指定背景图像的位置。
实例
把背景图片放在右上角:
body {
background-image: url("tree.png");
background-repeat: no-repeat;
background-position: right top;
}