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

1、首先打开Atom编辑器导入项目文件夹,先创建一个index.html的文件。定义一下html文件的主信息:

2、然后填写自己的网页内容, 设置一下样式,直接在body后面加上background=”图片名字”即可插入图片:

3、最后来到浏览器,刷新一下网页,这样就会显示背景了:

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

你的图片路径不对,当你的网页文件和back文件夹都保存在桌面时 。

1、设置背景图片需要使用css样式设,设置代码如下 以整个页面的背景图片为例css样式body background: url(img/beijing.jpg) no-repeat;url 内放置为图片的路径地址no-repeat 图片不平铺background-size: cover;图片自适应整个页面。

2、两个文件必须存在,首先,html是标记性语言,它不能自带图片,写代码的时候只是用img标记把图片的位置写进去,它会自己找图片,这就是为什么有时在网上看网页图片会有小红叉。

如何在html中设置背景图片?

1、设置背景图片只需在css样式中设置backgroud-image属性:

<style type=”text/css” >

body{

background-image:url(你的图片地址);

background-position:center;        

background-repeat:repeat-y;

}

</style>

2、其中, background-image:url(你的图片地址)表示背景图片的存放路径;

background-position:表示的是背景图片的位置,主要有top(上)、bottom(下)、left(左)、right(右)这四个取值;

background-repeat:表示的图片的平铺方式。默认情况是平铺,一般设置为no-repeat,表示的是不平铺。

背景颜色属性(background-color):

这个属性为HTML元素设定背景颜色,相当于HTML中bgcolor属性。

body {background-color:#99FF00;}:

上面的代码表示Body这个HTML元素的背景颜色是翠绿色的。

演示示例

背景图片属性(background-image):

这个属性为HTML元素设定背景图片,相当于HTML中background属性。

<body style=”background-image:url(../images/css_tutorials/background.jpg)”>

上面的代码为Body这个HTML元素设定了一个背景图片。

演示示例

背景重复属性(background-repeat):

这个属性和background-image属性连在一起使用,决定背景图片是否重复。如果只设置background-image属性,没设置background-repeat属性,在缺省状态下,图片既横向重复,又竖向重复。

repeat-x 背景图片横向重复;

repeat-y 背景图片竖向重复;

no-repeat 背景图片不重复;

body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:repeat-y}

上面的代码表示图片竖向重复。

演示示例

背景附着属性(background-attachment):

这个属性和background-image属性连在一起使用,决定图片是跟随内容滚动,还是固定不动。这个属性有两个值,一个是scroll,一个是fixed。缺省值是scroll。

body {background-image:url(../images/css_tutorials/background.jpg); background-repeat:no-repeat; background-attachment:fixed}

上面的代码表示图片固定不动,不随内容滚动而动。

演示示例

背景位置属性(background-position):

这个属性和background-image属性连在一起使用,决定了背景图片的最初位置。

body {background-image:url(../images/css_tutorials/background.jpg);background-repeat:no-repeat; background-position:20px 60px}

上面的代码表示背景图片的初始位置距离网页最左面20px,距离网页最上面60px。

演示示例

背景属性(background):

这个属性是设置背景相关属性的一种快捷的综合写法, 包括background-color, background-image, background-repeat, backgroundattachment, background-position。

body {background:#99FF00 url(../images/css_tutorials/background.jpg) no-repeat fixed 40px 100px}

上面的代码表示,网页的背景颜色是翠绿色,背景图片是background.jpg图片,背景图片不重复显示,背景图片不随内容滚动而动,背景图片距离网页最左面40px,距离网页最上面100px。

html网页制作,如何设置网页背景色?

首先打开电脑上自带的记事本程序,然后输入html网页基本结构语句。<html><body></body></html>

由于css样式必须在标签<head></head>之间,因此我们点击<html>后面,输入<head></head>标签。

在head标签之间输入样式标签<style></style>,然后定义一些属性,例如

<style type=”text/css”>

body {background-color: yellow} 定义网页背景色为黄色;

h1 {background-color: #00ff00} 定义h1标签背景色为#00ff00;

strong {background-color: transparent} 定义strong标签背景色为透明;

p {background-color: rgb(250,0,255)} 定义p标签背景色为rgb值;

p.no2 {background-color: gray; padding: 20px;} 这个定义class属性为no2的p标签背景色为灰色,并且边距为20px;

</style>

然后点击body标签后面输入正文标签内容,例如

<h1>这是KING</h1>

<strong>这是KING</strong>

<p>这是KING</p>

<p class=”no2″>这个KING设置20内边距。</p>

点击记事本菜单中的文件,选择另存为,把内容保存为html网页格式。双击打开预览效果。

我们可以发现代码中两个同样的<p>标签显示的css样式却不同,区别就在于样式中定义的p.no2,这就是正文代码中class=”no2″的优势所在,可以定义个性风格。

还可以选择用html设置,如下:

颜色自己调,可以用取色器查看颜色,例如background-color:#789999; 如果需要加边框可以用border属性

html怎么设置背景颜色

背景颜色的设置一般通过background来实现。html标签有三种方式内嵌,外联,行内。这里说一下行内的方式。举个例子:

<div style=”background: pink; width:100px;height:100px;”></div>

这样您就会得到一个宽高都是100像素的粉色div元素。html元素默认是没有高度的,需要注意以下。

单纯的背景色的话background也可以写作background-color。background是属性连写,也可以设置背景图,还可以做一些其他设置。

颜色的值可以是固定的英文名称,比如pink,red。也可以是十六进制,比如#666666。也可以是RGB,也可以是rgba,后者比前者多了个透明度,很实用。

html如何改变背景图片

如果你想向网页中添加图片,用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文件中。