visual studio简称为vs。下面,我们来看看HTML中怎么插入图片作为背景图片吧。
打开vs打开visual studio软件,并新建一个文件夹为img,把图片粘贴到文件夹中,如下图所示:
<body style=" background:url(img/img01.jpg)">设置背景图片的代码为 style=" background:url(img/img01.jpg)",如下图所示:
在浏览器中查看右击【HTMLPage.htm】,选择【在浏览器中查看】,如下图所示:
预览效果在浏览器中的预览效果如下图所示:
在CSS样式中设置backgroud-image属性,代码如下:
<styletype="text/css">
body{
background-image:url(你的图片地址)
background-position:center
background-repeat:repeat-y;
}
</style>
说明:
1、background-image:url(你的图片地址):指这张背景图存放的路径;
2、background-position:指这张背景图的位置。left(左)、right(右)、top(上)、bottom(下)可以取值,你要求图片居中,所以是“center”;
background-repeat:指图片平铺方式;一般都默认平铺,设置为no-repeat则是不平铺。你要求“y坐标平铺”所以是“repeat-y”。
可以使用html的background-image标签和background-size实现插入背景图片和控制图片大小。
具体步骤如下:
需要准备的材料分别是:电脑、浏览器、ultraedit。
1、在ue编辑器中新建一个空白的html文件。
2、在ue编辑器中输入以下html代码。
3、编辑完成以后,在ue编辑器中点击保存,格式选择UTF8无BOM。
4、在浏览器中打开此html文件,可以看到最终想要实现的背景图片效果。
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)