html中设置元素的背景色都是通过CSS中的background 属性来完成。
例如,给整个页面(body)设置背景色:body{background: #ddd};如果要将图片作为背景色:body{background-image: url(1.jpg)},其中url括号后面的是背景图片的链接。
拓展资料:
background 简写属性在一个声明中设置所有的背景属性。
background可以设置如下属性:
background-color 背景颜色
background-position 背景图像的位置
background-size 背景图片的尺寸
background-repeat 重复背景图像
background-origin 背景图片的定位区域
background-clip 背景的绘制区域
background-attachment 背景图像是否固定或者随着页面的其余部分滚动
background-image 背景图像
如果不设置其中的某个值,也不会出问题,通常建议使用这个属性,而不是分别使用单个属性,因为这个属性在较老的浏览器中能够得到更好的支持,而且需要键入的字母也更少。
代码:
效果:
如果要实现点击按钮后循环变换背景颜色的效果,可以使用 JavaScript 的 setInterval 方法。例如,以下代码演示了如何实现这种效果:<!DOCTYPE html>
<html>
<head>
<title>循环变换背景颜色</title>
<style>
body {
background-color: red
}
</style>
</head>
<body>
<button id="change-color">更改背景颜色</button>
<script>
var colors = ['red', 'green', 'blue']
var index = 0
// 为“更改背景颜色”按钮添加点击事件监听器
document.getElementById('change-color').addEventListener('click', function() {
// 使用 setInterval 方法循环变换背景颜色
setInterval(function() {
document.body.style.backgroundColor = colors[index]
index = (index + 1) % colors.length
}, 1000)
})
</script>
</body>
</html>
在上面的代码中,我们首先定义了一个颜色数组 colors,其中包含了要变换的颜色。然后,我们使用 addEventListener 方法为“更改背景颜色”按钮添加了点击事件监听器。当用户点击该按钮时,会调用回调函数,并在函数内部调用 setInterval 方法。
如果你想向网页中添加图片,用HTML就可以了。但是如果你想将一张图片设置为网页背景图片,就同时需要HTML和CSS。HTML的全名叫做“超文本标记语言”,是一种用来指示浏览器在网页中显示什么内容的代码。CSS的全名叫做“层叠样式表”,用来改变网页外观和布局。你还需要一张用于web页面的背景图片。部分 :
新建文档
1
创建一个文件夹用来存放HTML文件和背景图片。在电脑上创建并命名一个文件夹,方便日后查找。
你可以为文件夹随意命名,但是使用HTML时,最好养成习惯,使用简短的单个单词来命名文件和文件夹。
2
将背景图片放入HTML文件夹。将你想要用作背景的图片放入HTML文件夹。
如果你不在意网页是否能在网速较慢的旧设备上运行顺畅,可以使用高分辨率图片来作为背景。选择带有重复图样的简单图片作为背景也不错,因为你可以在这种背景下阅读任何文本。
如果你没有图片,可以下载免费的背景图。下载好图片,将它放入创建好的HTML文件夹中。
3
创建一个HTML文件。打开文本编辑器,然后新建一个文件。将文件另存为index.html。
你可以使用任何你想要的文本编辑器,系统自带的文本编辑器也可以,如Windows的记事本,以及Mac OS X的文本编辑器。
如果你想要使用能处理HTML的文本编辑器,点击这里下载Windows、Mac OS X、Linux操作系统都可以使用的文本编辑器Atom。
如果你使用的是Mac电脑的文本编辑器,在开始编写HTML文件之前,单击“格式”菜单,然后单击“生成纯文本”。该设置会确保HTML文件在网页浏览器中正常加载。
诸如Microsoft Word之类的文字处理程序并不适合编写HTML,因为它们添加了一些不可见的字符和格式,这些字符和格式可能会破坏HTML文件,让它无法在网页浏览器中正确显示。
部分 2 的 5:
编写HTML文件
复制并粘贴标准HTML代码。选择并复制下面的HTML代码,然后粘贴到打开的 index.html文件中。