怎么样设置HTML背景图片 应该怎么做?

来源:互联网
责任编辑:李佳
 综合 
字体:

在本文中:新建文档编写HTML文件查看HTML文件理解HTML代码理解CSS代码

如果你想向网页中添加图片,用HTML就可以了。但是如果你想将一张图片设置为网页背景图片,就同时需要HTML和CSS。HTML的全名叫做“超文本标记语言”,是一种用来指示浏览器在网页中显示什么内容的代码。[1] CSS的全名叫做“层叠样式表”,用来改变网页外观和布局。[2]你还需要一张用于web页面的背景图片。

部分 1新建文档

以2627945 1 1为标题的图片

1创建一个文件夹用来存放HTML文件和背景图片。在电脑上创建并命名一个文件夹,方便日后查找。

你可以为文件夹随意命名,但是使用HTML时,最好养成习惯,使用简短的单个单词来命名文件和文件夹。

以2627945 2 1为标题的图片

2将背景图片放入HTML文件夹。将你想要用作背景的图片放入HTML文件夹。

如果你不在意网页是否能在网速较慢的旧设备上运行顺畅,可以使用高分辨率图片来作为背景。选择带有重复图样的简单图片作为背景也不错,因为你可以在这种背景下阅读任何文本。

如果你没有图片,可以下载免费的背景图。下载好图片,将它放入创建好的HTML文件夹中。

以2627945 3 1为标题的图片

3创建一个HTML文件。打开文本编辑器,然后新建一个文件。将文件另存为index.html。

你可以使用任何你想要的文本编辑器,系统自带的文本编辑器也可以,如Windows的记事本,以及Mac OS X的文本编辑器。

如果你想要使用能处理HTML的文本编辑器,点击这里下载Windows、Mac OS X、Linux操作系统都可以使用的文本编辑器Atom。

如果你使用的是Mac电脑的文本编辑器,在开始编写HTML文件之前,单击“格式”菜单,然后单击“生成纯文本”。该设置会确保HTML文件在网页浏览器中正常加载。

诸如Microsoft Word之类的文字处理程序并不适合编写HTML,因为它们添加了一些不可见的字符和格式,这些字符和格式可能会破坏HTML文件,让它无法在网页浏览器中正确显示。

部分 2编写HTML文件

以2627945 4 1为标题的图片

1复制并粘贴标准HTML代码。选择并复制下面的HTML代码,然后粘贴到打开的 index.html文件中。

<!DOCTYPE html><html><head><title>页面标题</title> <style>body {  background-image: url(" ");} </style> </head> <body> </body></html>

以2627945 5 1为标题的图片

2添加背景图像地址。在index.html文件中找到“background-image: url(" ");”这一行,将光标移到括号之间,然后输入背景图片文件名。确保包含背景图片文件扩展名。当你完成的时候,应该是这样的:

background-image: url("background.png");当你使用的文件名没有文件路径或地址时,网页浏览器将在网页文件夹中查找指定的图片。如果文件位于文件系统上的另一个文件夹中,则需要为文件添加完整路径。[3]

以2627945 6 1为标题的图片

3保存HTML文件。

部分 3查看HTML文件

以2627945 7 1为标题的图片

1在网页浏览器中打开HTML文件。右键单击index.html文件,然后在你选择的网页浏览器中打开它。

当浏览器打开时,如果没有看到图片,确认图片文件名在index.html文件的文本编辑器窗口中拼写正确。

当浏览器打开时,如果你看到的是HTML代码,而不是背景图片,那是因为你的index.html文件被保存为富文本文档。最好还是换一个文本编辑器来编辑HTML文件。

以2627945 8 1为标题的图片

2编辑HTML文件。在文本编辑器窗口中,将光标移至<body> </body>标签之间,然后输入“Hello world!”。重新加载浏览器窗口,查看背景图片上方的文本。

部分 4理解HTML代码

以2627945 9 1为标题的图片

1理解HTML和CSS标签。HTML代码由开始标签和结束标签组成。<body>是主体的开始标签,</body>是主体的结束标签。HTML页面上的每个开始标签都需要有一个结束标签,以便正确显示页面。

以2627945 10 1为标题的图片

2理解DOCTYPE标签。每一个编写规范的HTML页面开头都应该有<!DOCTYPE html>。该标签是用来告诉浏览器该文件是HTML文件。

以2627945 11 1为标题的图片

3编辑HTML文件。在文本编辑窗口中,将光标移至<body> </body>标签之间,然后输入“Hello world!”。重新加载浏览器窗口,查看背景图片上方的文本。

以2627945 12 1为标题的图片

4理解HTML和CSS标签。HTML代码由开始标签和结束标签组成。<body>是主体的开始标签,</body>是主体的结束标签。HTML页面上的每个开始标签都需要有一个结束标签,以便正确显示页面。

以2627945 13 1为标题的图片

5理解标题标签。<title> 标签是出现在浏览器窗口标题栏中的文本,以及在浏览器标签中显示的文本。

以2627945 14 1为标题的图片

6理解样式标签。<style>标签标示出CSS内容。<style>标签内的所有内容都是CSS代码。

以2627945 15 1为标题的图片

7理解主体标签。在<body>标签内输入的任何内容都会显示出来,除了HTML代码或CSS 代码。

以2627945 16 1为标题的图片

8编辑HTML文件。在文本编辑窗口中,将光标移至<body> </body>标签之间,然后输入“Hello world!”。重新加载浏览器窗口,查看背景图片上方的文本。

部分 5理解CSS代码

以2627945 17 1为标题的图片

1理解CSS代码。在index.html文件代码中,<style>标签内的CSS代码指示浏览器在网页显示时,向<body>标签添加特定名称的背景图片。

以2627945 18 1为标题的图片

2查看CSS代码。

body {  background-image: url("background.png");}

以2627945 19 1为标题的图片

3理解CSS代码的各个部分。CSS样式由选择器和声明两部分组成。[4]在示例中,body是选择器,而

background-image: url("background.png") 是声明部分。选择器可以是任何HTML标签。声明总是在大括号{ }之间。

以2627945 20为标题的图片

4理解CSS声明。CSS声明由属性和值两部分组成。在大括号之间,

background-image 是属性,而url("background.png")是值。[5]属性描述样式类型,值描述属性是如何样式化的。属性和值始终用冒号“:”分隔。CSS声明始终以分号“;”结尾。

根据您访问的内容,您可能还对以下内容感兴趣,希望对您有帮助:

html里怎么插入背景图片??急

答:1、插入背景图片有两种方法,一种是用html的img标签,另一种是利用css的background标签插入。具体操作是首先新建一个html文件,写入两个div,分别用来演示两种方法插入标签: 2、首先是用html标签插入图片,这里直接在img标签中使用src属性就可...

htmL中怎么插入背景图片如何设置背景图片大小

答:CSS里设置这两个参数: 背景图background: url(/*图片路径*/) repeat-x/*平铺方式*/; 尺寸:backgroun-size:100% 100%。 其实大多数的HTML编辑器操作都是一样的,今天我就以Hbuilder来讲解,首先新建一个HTML页面,这里命名为“new_file.html”。 ...

html中,怎么让背景图片充满整个页面

答: 下面这段代码给div设置了一个宽度和高度,然后添加了一张背景图片,并使用了background-size:cover;这个属性,就会自动放大或缩小背景图片来适应,但是需要指出的是这个属性在需要在IE9及以上版本支持,谷歌和火狐都支持,具体支持情况看上面的...

html背景图片怎么设置高度和宽度?

答:background-size:宽度 高度 如:给body背景写:body{background-size:200px 300px;} html:超文本标记语言, 标准通用标记语言下的一个应用。 “ 超文本 ”就是指页面内可以包含图片、 链接,甚至音乐、 程序等非文字元素。 超文本标记语言的结构...

HTML怎么设置图片为网页背景?

答:你的图片路径不对,当你的网页文件和back文件夹都保存在桌面时 。 1、设置背景图片需要使用css样式设,设置代码如下 以整个页面的背景图片为例css样式body background: url(img/beijing.jpg) no-repeat;url 内放置为图片的路径地址no-repeat 图...

html中怎么图片设置为背景

答:如果要刚刚好的话,,图片如果比例不合适就要拉伸了。 方法原理就是用img来模拟背景, 具体做法就是给父元素用position:relative,这张图片用position:absolute,然后设置z-index用一个负值,,就可以作...

html网页设计里面怎么平铺背景图片

答:html网页设计里面平铺背景图片的代码如下: 网页背景默认是平铺整个屏幕的,可能有以下原因导致不能平铺: 1、图片不够大,又background属性不能拉伸图片; 2、只能用个div,把其z-index值设为负,并使这个div大小为整个body大小,在div里用 ; ...

html中怎么设置背景图片的属性?

答:用css 在你需要添加背景的元素上面加上这个属性 style="background:url(1.jpg) 0 0 repeat" 如:你要给一个table添加背景 1.jpg描述你背景的路径

html网页制作中如何设置背景图片(如何引用)

答:1、首先打开Atom编辑器导入项目文件夹,先创建一个index.html的文件。定义一下html文件的主信息: 2、然后填写自己的网页内容, 设置一下样式,直接在body后面加上background="图片名字"即可插入图片: 3、最后来到浏览器,刷新一下网页,这样就...

HTML中怎么添加不了背景图片呀?

答:1、先做一个简单的HTML页面,页面里只有一个div和一段文字。 2、要添加整个页面的背景图片,我们就只能把背景加到body标签里了,所以我们在body里添加一个样式,叫‘bg’ 3、然后定义这个bg的样式规则,主要就是添加background-image样式,就是添...


www.book1234.com true http://www.book1234.com/10/4336/108007.html report 92143 怎么样设置HTML背景图片应该怎么做?,在本文中:新建文档编写HTML文件查看HTML文件理解HTML代码理解CSS代码如果你想向网页中添加图片,用HTML就可以了。但是如果你想将一张图片设置为网页背景图片,就同时需要HTML和CSS。HTML的全名叫做“超文本标记语言”,是一种用来指示浏...
娱乐时尚
科技资讯
历史文化
真视界
旅游美食
精彩图文
我爱我车
母婴健康
关于本站 | 广告服务 | 手机版 | 商务合作 | 免责申明 | 招聘信息 | 联系我们
Copyright © 2004-2018 book1234.com All Rights Reserved. 布客网 版权所有
京ICP备10044368号-1 京公网安备11010802011102号
教育考试: 学历财经建筑 医药公考资格外语电脑作文招聘中小学留学 文档 移民 文库专栏23问答中心z资讯z资讯1资讯涨资讯涨资讯1资讯问答图书馆知识IT编程数码信息解决方案信息中心IT科技问答新闻中心软件教室设计大全网络相关英语学习开发编程考试中心参考范文管理文库营销中心站长之家IT信息中心商学院数码大全硬件DIY企业服务网吧在线百科硬件知识手机平板汽车游戏家电精彩摄影现代家居IT女人经验健康养生猎奇创业攻略教育学习历史时尚潮流最近更新涨知识