html5怎么将图片作为背景(html5怎么将图片作为背景颜色)
html5怎么设置整页背景图片
html5中设置整页背景图片的方法是利用css3样式：
写法如下：
img.bg {
?/* Set rules to fill background */
?min-height: 100%;
?min-width: 1024px;
?/* Set up proportionate scaling */
?width: 100%;
?height: auto;
?/* Set up positioning */
?position: fixed;
?top: 0;
?left: 0;
}
@media screen and (max-width: 1024px) { /* Specific to this particular image */
?img.bg {
? ?left: 50%;
? ?margin-left: -512px; ? /* 50% */
?}
}
效果如：
HTML中怎么插入图片作为背景？
visual studio简称为vs。下面，我们来看看HTML中怎么插入图片作为背景图片吧。
打开vs
打开visual studio软件，并新建一个文件夹为img，把图片粘贴到文件夹中，如下图所示：
body style=" background:url(img/img01.jpg)"
设置背景图片的代码为 style=" background:url(img/img01.jpg)"，如下图所示：
在浏览器中查看
右击【HTMLPage.htm】，选择【在浏览器中查看】，如下图所示：
预览效果
在浏览器中的预览效果如下图所示：
html5如何把一个图片设为页面的全屏背景？
//HTML?-?From?qifeiye.com
img?src="images/bg.jpg"?id="bg"?alt=""
//CSS
#bg?{
??position:?fixed;?
??top:?0;?
??left:?0;?
??/*?Preserve?aspet?ratio?*/
??min-width:?100%;
??min-height:?100%;
}
或者
img.bg?{
??/*?Set?rules?to?fill?background?*/
??min-height:?100%;
??min-width:?1024px;
??/*?Set?up?proportionate?scaling?*/
??width:?100%;
??height:?auto;
??/*?Set?up?positioning?*/
??position:?fixed;
??top:?0;
??left:?0;
}
@media?screen?and?(max-width:?1024px)?{?/*?Specific?to?this?particular?image?*/
??img.bg?{
????left:?50%;
????margin-left:?-512px;???/*?50%?*/
??}
}
或者
//HTML?-?From?qifeiye.com
img?src="images/bg.jpg"?id="bg"?alt=""
/CSS
#bg?{?position:?fixed;?top:?0;?left:?0;?}
.bgwidth?{?width:?100%;?}
.bgheight?{?height:?100%;?}
//jQuery
$(window).load(function()?{????
????????var?theWindow????????=?$(window),
????????????$bg??????????????=?$("#bg"),
????????????aspectRatio??????=?$bg.width()?/?$bg.height();
????????function?resizeBg()?{
????????????????if?(?(theWindow.width()?/?theWindow.height())??aspectRatio?)?{
????????????????????$bg
????????????????????????.removeClass()
????????????????????????.addClass('bgheight');
????????????????}?else?{
????????????????????$bg
????????????????????????.removeClass()
????????????????????????.addClass('bgwidth');
????????????????}
????????}
????????theWindow.resize(resizeBg).trigger("resize");
});
HTML中怎么插入图片作为背景，我用的是记事本！
代码如下：
1、上级目录img src="../images/石家庄.jpeg" alt="" /
2、根目录img src="/images/石家庄.jpeg" alt="" /
3、同级目录img src="images/石家庄.jpeg" alt="" /
4、平铺背景图片
body background="d:\image\石家庄.jpg"或者body style="background-image: url(d:\image\石家庄.jpg);"
5、背景图片不重复
body style="background-image: url(d:\image\石家庄.jpg) no-repeat;"
6、背景图片居中不重复
body style="background-image: url(d:\image\石家庄.jpg) no-repeat 50% 0;"
注意：图片路径问题，用d:\image\石家庄.jpg只能在你自己的电脑上有效，上传到网站上，建议image文件夹和网页放在同一目录，则图片路径改为：“image/石家庄.jpg”。
扩展资料：
HTML中主体内容：
body/body；，网页中显示的实际内容均包含在这2个正文标记符之间。正文标记符又称为实体标记。表示网页的主体部分，也就是用户可以看到的内容，可以包含文本、图片、音频、视频等各种内容。
格式一般如下：
html
head
title；网页名称/title
/head
body
存入网页的主体部分内容如：
table；代表表格
tr；代表行
p；代表段落
td；代表单元格
参考资料来源：百度百科—HTML
参考资料来源：百度百科—body
html怎么添加背景图片
1、插入背景图片有两种方法，一种是用html的img标签，另一种是利用css的background标签插入。具体操作是首先新建一个html文件，写入两个div，分别用来演示两种方法插入标签：
2、首先是用html标签插入图片，这里直接在img标签中使用src属性就可以插入图片路径就成功了：
3、接着是用css插入，在div中设置class属性为img2，在script标签中使用background标签插入，其中url是标签的路径，no-repeat是设置图片不重复，center是设置照片居中显示：
4、最后给这些标签都设置一些样式，让它们显得美观一些。然后打开浏览器查看效果：
5、打开浏览器，可以看到照片都显示出来了。以上就是html插入照片的方法介绍：