步骤一、首先打开需要修改的HTML文件。
步骤二、然后始化样式，将代码添加在<style></style>标签内。
步骤三、添加一个div容器，然后命名为bg-box
步骤四、背景全屏需要容器全屏，将bg-box的样式补全。
步骤五、设置完毕，图片背景以及全屏了。
具体如下。新建html文件，在body标签中插入img标签，需要注意的是，img在html中没有结束标签，所以不需要添加“”。给标签添加“src”为了防止用户浏览网页时无法加载图片，可以给img标签添加“alt”属性，这个属性可以在图片加载失败时显示出来以告诉用户这里是张什么图片，img标签中插入的图片宽和高默认是图片自身的宽和高，如果想要自定义宽和高的话，可以用“width”和“height”来控制。
超文本标记语言(HyperTextMarkupLanguage)，标准通用标记语言下的一个应用。HTML不是一种编程语言，而是一种标记语言(markuplanguage)，是网页制作所必备的。“超文本”就是指页面内可以包含图片、链接，甚至音乐、程序等非文字元素。超文本标记语言(或超文本标签语言)的结构包括“头”部分、和“主体”部分，其中“头”部提供关于网页的信息，“主体”部分提供网页的具体内容。
<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication2.Default" %>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<meta http-equiv="Content-Type" content="text/htmlcharset=utf-8" />
<title></title>
<script type="text/javascript">
//选择图片,c#默认请求大小4M。
//如果需求需要大于4M，修改httpRuntime下的maxRequestLength
//单位为：K
function fileSelected() {
var files = document.getElementById('fileToUpload').files
if (files.length >0) {
var fileInfo = ''
for (var i = 0i <files.lengthi++) {
fileInfo += 'Name: ' + files[i].name + '<br/>'
fileInfo += 'Size: ' + files[i].size + '<br/>'
fileInfo += 'Type: ' + files[i].type + '<br/>'
}
document.getElementById('fileInfo').innerHTML = fileInfo
}
}
function uploadFile() {//上传图片
var files = document.getElementById('fileToUpload').files
if (files.length >0) {
var fd = new FormData()
for (var i = 0i <files.lengthi++) {
fd.append("fileToUpload", files[i])
}
var xhr = new XMLHttpRequest()
xhr.upload.addEventListener("progress", uploadProgress, false)
xhr.addEventListener("load", uploadComplete, false)
xhr.addEventListener("error", uploadFailed, false)
xhr.addEventListener("abort", uploadCanceled, false)
xhr.open("POST", "Upload.ashx?filename=UploadImage")
xhr.send(fd)
} else {
alert('请选择上传的图片！')
}
}
function uploadProgress(evt) {//上传中
if (evt.lengthComputable) {
var percentComplete = Math.round(evt.loaded * 100 / evt.total)
document.getElementById('progressNumber').innerHTML = percentComplete.toString() + '%'
}
else {
document.getElementById('progressNumber').innerHTML = 'unable to compute'
}
}
function uploadComplete(evt) {//上传完成
/* This event is raised when the server send back a response */
alert(evt.target.responseText)
}
function uploadFailed(evt) {//上传失败
alert("There was an error attempting to upload the file.")
}
function uploadCanceled(evt) {//上传被取消
alert("The upload has been canceled by the user or the browser dropped the connection.")
}
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input type="file" name="fileToUpload" id="fileToUpload" multiple="multiple" onchange="fileSelected()" />
<input type="button" onclick="uploadFile()" value="Upload Image" />
<div id="fileInfo"></div>
<div id="progressNumber"></div>
</div>
</form>
</body>
</html>
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）