HTML 语言中页面背景图像、背景音乐的设置方法？插入超链接、图像的语法是啥
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了HTML 语言中页面背景图像、背景音乐的设置方法？插入超链接、图像的语法是啥相关的知识，希望对你有一定的参考价值。
参考技术A 1、设置背景图片：<body background="图片的地址">2、设置背景音乐：
第一种：在页面代码中的<head></head>之间加入<bgsound src="音乐url" loop="-1"> ，
“loop”中的数值是音乐循环的次数，可设置为任意正整数，若设为“-1”，表示音乐永远循环。
这种背景音乐是打开叶子后直接播放的，在网页上不会有显示。这是最简单的一种。
第二种：这种方法比较复杂，但可设置的参数也较多。在网页代码中的<style></style>标签之间加入一个“Embed”标签，格式为：
<EMBED src="音乐url" autostart="true" loop="true" width="80" height="20">
src 背景音乐的地址（即url）。
autostart 是否自动播放，“true”为音乐文件读取完后立即播放，“false”则不立即播放，默认值为“false”
loop 循环次数，设置为“true”为永远循环，“false”为仅播放一次，若设为任意一正整数，则循环所输入的次数。
volume 设置音量，取值范围是“0-100”，默认值为系统当前音量。
starttime 设置音乐开始播放的时间，格式是“分：秒”，
如：starttime＝"00:10"，就是从第10秒开始播放。
endtime 设置音乐结束播放的时间，具体格式同上。
width 设置音乐播放控制面板的宽度。
height 设置音乐播放控制面板的高度。
controls 设置音乐播放控制面板的外观，
console为通常面板；
smallconsole为小型面板。
playbutton为是否显示播放按钮；
pausebutton为是否显示暂停按钮；
stopbutton为是否显示停止按钮；
volumelever为是否显示音量调节按钮，如果想设置你想要的效果的话，可以参考这些属性的意义，之后在标签中添加这些属性，即可。
3、插入超链接：<a href="链接地址">要链接的文本</a>
4、插入图像：<img src="url" />
CSS 背景图像
background-image 属性可以设置背景图像。
背景图像可以填充整个页面的，也可以填写一部分。
background-image 属性的使用很简单：background-image:url(图片地址)
填充整个页面示例
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>背景图片</title> 5 <style type="text/css"> 6 <!--背景图片样式--> 7 #web_bg 8 position: fixed; 9 top: 0; 10 left: 0; 11 width: 100%; 12 height: 100%; 13 min-width: 1366*768px; 14 z-index: -10; 15 zoom: 1; 16 background-color: #fff; 17 background-repeat: no-repeat; 18 background-size: cover; 19 -webkit-background-size: cover; 20 -o-background-size: cover; 21 background-position: center 0; 22 23 24 </style> 25 </head> 26 <body> 27 <h1>叮当猫</h1> 28 <!--添加背景图片--> 29 <div id="web_bg" style="background-image: url(E://老师的例子/个人简绍/picture/72.jpg);"></div> 30 </body> 31 </html>
填充部分元素示例
为某个元素设置CSS规则background-image 属性，则可以做到部分元素有背景颜色。
下面的示例演示如何如何给段落元素加背景。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>填充部分</title>
5 <style type="text/css">
6 p
7 background-image: url("https://static.collectui.com/shots/2890879/colorful-patterns-large");
8 padding: 10px;
9 color:#fff;
10 </style>
11 </head>
12 <body>
13 <h1>软件开发，成就梦想</h1>
14 <h2>学编程，上利永贞网 https://www.liyongzhen.com/</h2>
15 <p>我们能为中国‘996’程序员做些什么？怎样才能能引起西方媒体和政府的关注？</p>
16 <p>在程序员圈子里颇有名气的代码托管平台GitHub上，有人发起了一个名为“996.ICU”的项目，意为“工作996，生病ICU”，
17 “996”即许多企业的程序员工作状态，从上午9点干到晚上9点，每周工作6天。这一项目得到了大量程序员的响应，自从3月26日注册以来，
18 截至4月2日Star数已突破15万整数关口，表示至少有15万名程序员关注了这个项目。</p>
19 </body>
20 </html>
以上图像素材来源 http://collectui.com/challenges/background-pattern
重复图像
background-repeat 属性可以重复图像，这对于小图片来说是福音。
background-repeat 属性有6个值：
- repeat 背景图像在垂直方向和水平方向都重复
- repeat-x 背景图像在水平方向重复
- repeat-y 背景图像在垂直方向重复
- scroll 背景图像随着滚动页面而动
- no-repeat 背景图像只显示一次
- fixed 背景图像固定在页面中一个位置
下面的代码演示背景图像在水平方向重复。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>重复图像</title>
5 <style type="text/css">
6 body
7 background-image: url("https://www.liyongzhen.com//docs/images/header.gif");
8 background-repeat: repeat-x;
9 color: #665544;
10 padding: 20px;
11 h1
12 color: white;
13 </style>
14 </head>
15 <body>
16 <h1>软件开发，成就梦想</h1>
17 <h2>学编程，上利永贞网 https://www.liyongzhen.com/</h2>
18 <p>我们能为中国‘996’程序员做些什么？怎样才能能引起西方媒体和政府的关注？</p>
19 <p>在程序员圈子里颇有名气的代码托管平台GitHub上，有人发起了一个名为“996.ICU”的项目，意为“工作996，生病ICU”，
20 “996”即许多企业的程序员工作状态，从上午9点干到晚上9点，每周工作6天。这一项目得到了大量程序员的响应，自从3月26日注册以来，
21 截至4月2日Star数已突破15万整数关口，表示至少有15万名程序员关注了这个项目。</p>
22 </body>
23 </html>
背景图片定位
background-position属性可以给背景图片定位。
background-position属性有两个值，第一个值是水平位置，第二个值是垂直位置。这两个值可以使用百分比来表示（50% 50% 表示垂直和水平都居中）。
也可以使用下面的方式表示：
- left top
- left center
- left bottom
- center top
- center center
- center bottom
- right top
- rigth center
- right bottom
下面的代码演示了背景图像定位。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>图片定位</title>
5 <style type="text/css">
6 body
7 background-image: url("https://www.liyongzhen.com//docs/images/spring-flower.png");
8 background-repeat: no-repeat;
9 background-position:center top;
10 color: #665544;
11 padding: 20px;
12 h1
13 color: white;
14 </style>
15 </head>
16 <body>
17 <h1>软件开发，成就梦想</h1>
18 <h2>学编程，上利永贞网 https://www.liyongzhen.com/</h2>
19 <p>我们能为中国‘996’程序员做些什么？怎样才能能引起西方媒体和政府的关注？</p>
20 <p>在程序员圈子里颇有名气的代码托管平台GitHub上，有人发起了一个名为“996.ICU”的项目，意为“工作996，生病ICU”，
21 “996”即许多企业的程序员工作状态，从上午9点干到晚上9点，每周工作6天。这一项目得到了大量程序员的响应，自从3月26日注册以来，
22 截至4月2日Star数已突破15万整数关口，表示至少有15万名程序员关注了这个项目。</p>
23 </body>
24 </html>
图片来源 https://www.kisspng.com/
background属性简写
background属性可以像margin padding属性一样，有简写方法，它的简写顺序是：
- background-color
- background-image
- background-repeat
- background-attachment
- background-position
如果某属性不想写，可以忽略。
1 <!DOCTYPE html>
2 <html>
3 <head>
4 <title>background简写</title>
5 <style type="text/css">
6 body
7 background: url("https://www.liyongzhen.com//docs/images/spring-flower.png") no-repeat center top;
8 color: #665544;
9 padding: 20px;
10 h1
11 color: white;
12 </style>
13 </head>
14 <body>
15 <h1>软件开发，成就梦想</h1>
16 <h2>学编程，上利永贞网 https://www.liyongzhen.com/</h2>
17 <p>我们能为中国‘996’程序员做些什么？怎样才能能引起西方媒体和政府的关注？</p>
18 <p>在程序员圈子里颇有名气的代码托管平台GitHub上，有人发起了一个名为“996.ICU”的项目，意为“工作996，生病ICU”，
19 “996”即许多企业的程序员工作状态，从上午9点干到晚上9点，每周工作6天。这一项目得到了大量程序员的响应，自从3月26日注册以来，
20 截至4月2日Star数已突破15万整数关口，表示至少有15万名程序员关注了这个项目。</p>
21 </body>
22 </html>
以上是关于HTML 语言中页面背景图像、背景音乐的设置方法？插入超链接、图像的语法是啥的主要内容，如果未能解决你的问题，请参考以下文章