前端学习日记 DAY1
今日学习内容为前端背景设置
前端网页背景
1.常见纯色背景
代码展示:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>纯色背景</title>
<style>
body
{
background-color:#b0c4de;/*这里的颜色可以自行设置和更改*/
}
</style>
</head>
<body>
<h1>我的 CSS web 页!</h1>
<p>这里是纯色背景教程</p>
</body>
</html>
运行结果:
2.图片填充背景
在这里要使用的是css中的background-image 属性设置一个元素的背景图像。
元素的背景是元素的总大小,包括填充和边界(但不包括边距)。
默认情况下,background-image放置在元素的左上角,并重复垂直和水平方向。
**提示:**请设置一种可用的背景颜色,这样的话,假如背景图像不可用,可以使用背景色带代替。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>图片填充背景</title>
<style>
body
{
background-image:url('paper.gif');
/*此处的url是图片的地址,图片默认的是填充整个网页*/
background-color:#cccccc;
/*这里是当背景图片无法使用时,看到的背景颜色*/
}
</style>
</head>
<body>
<h1>Hello World!</h1>
</body>
</html>
运行结果: