css里面如何设置body背景图片满屏

html-css014

css里面如何设置body背景图片满屏,第1张

<!doctype html><html><head><meta charset="utf-8"><title>无标题文档</title><style>html{width:100%     height:100%}body{width:100%     height:100%    background: url(../1.jpg) no-repeat    background-size:cover     /*这里设置了背景图片为覆盖，以填满整个容器*/   }</style></head> <body></body></html>

工具/材料：电脑、sublime text、HTML文档

1、首先就是打开sublime text，准备一个HTML文档，在其中加入一个DIV。

2、然后通过CSS给DIV设置宽，高，背景色。

3、接下来在给div添加一个hover的伪类样式，hover就代表的是鼠标经过的样式。

4、然后，我们运行页面，就可以看到背景颜色已经设置成功了。

<html>

<head>

<title>鼠标划过表格行变色－简洁实现</title>

<style type="text/css">

#tb{width:666pxborder-collapse:collapseborder:1px solid #EEEfont-size:14px}

#tb th{background:#EEEborder-bottom:1px solid #CCCpadding:4px}

#tb td{border:1px solid #EEEpadding:4px}

</style>

</head>

<body>

<table id="tb">

<tr>

<th>商品名称</th>

<th>单价</th>

<th>库存数量</th>

<th>货位</th>

</tr>

<tr>

<td>丁学最喜欢的仙四豪华版-菱纱版</td>

<td>139</td>

<td>10000000</td>

<td>A12-253</td>

</tr>

<tr>

<td>仙四豪华版-梦璃版</td>

<td>139</td>

<td>10000000</td>

<td>A12-254</td>

</tr>

<tr>

<td>仙四普通版-首发</td>

<td>69</td>

<td>10000000</td>

<td>A12-255</td>

</tr>

</table>

<script type="text/javascript">

var obj=document.getElementById("tb")

for(var i=0i<obj.rows.lengthi++){

obj.rows[i].onmouseover=function(){this.style.background="#0EF"}

obj.rows[i].onmouseout=function(){this.style.background=""}

}

</script>

</body>

</html>