css如何使div背景图片填充

html-css013

css如何使div背景图片填充,第1张

css使div背景图片填充的具体操作步骤如下:

1、我们首先打开前端开发工具,新建一个html代码页面。

2、在html代码页面上创建一个用于设置背景颜色的div标签,然后给这个标签添加上class = "bg-img"。

3、设置背景图片,创建style标签,然后在标签里面对类为bg-img设置背景图片、图片不重复、宽、高的样式。

4、保存html代码,使用浏览器打开,这个时候会发现浏览器上的背景图片显示在左上角。

5、回到html代码页面,在bg-img类里添加background-position: center的属性。

6、保存html代码后重新刷新浏览器,这个时候会发现浏览器上的背景图片已经自动居中了。

CSS盒子模型就是在CSS技术所使用的一种思维模型。CSS假定所有的HTML文档元素都生成一个描述该元素在HTML文档布局中所占空间的矩形元素框,可以形象地将其看作是一个盒子。通过定义一系列与盒子相关的属性,可极大地丰富和促进各个盒子乃至整个HTML文档的表现效果和布局结构。

CSS盒子模型由内容区、填充、边框和空白边四部分组成。内容区是盒子模型的中心,呈现盒子的主要信息内容;填充是内容区和边框之间的空间;边框是环绕内容区和填充的边界;空白边位于盒子的最外围,是添加在边框外周围的空间。

扩展资料:

CSS盒子模型特点:

1、丰富的样式定义:CSS提供了丰富的文档样式外观,以及设置文本和背景属性的能力;允许为任何元素创建边框,以及元素边框与其他元素间的距离,以及元素边框与元素内容间的距离;允许随意改变文本的大小写方式、修饰方式以及其他页面效果。

2、易于使用和修改:CSS可以将样式定义在HTML元素的style属性中,也可以将其定义在HTML文档的header部分,也可以将样式声明在一个专门的CSS文件中,以供HTML页面引用。总之,CSS样式表可以将所有的样式声明统一存放,进行统一管理。

3、多页面应用:CSS样式表可以单独存放在一个CSS文件中,这样我们就可以在多个页面中使用同一个CSS样式表。CSS样式表理论上不属于任何页面文件,在任何页面文件中都可以将其引用。这样就可以实现多个页面风格的统一。

参考资料来源:百度百科-CSS盒子模型

<style>

*{ padding:0margin:0}

body{ position:relativewidth:100%height:100%min-height:600pxmin-width:800pxoverflow:hidden}

#header{ height:100pxposition:absolutetop:0width:100%padding-bottom:5pxbackground: #F36}

#middle{ height:100%width:100%bottom:0background:#eee}

#left{ position:absoluteleft:0top:105pxheight:100%width:220pxbackground:#9C3overflow-y:autooverflow-x:hidden}

#right{ margin-left:220pxpadding-top:105pxbackground: #63Foverflow-y:autooverflow-x:overheight:100%}

</style>

<div id="header">

<table width="100%" border="0">

<tr>

<td rowspan="2" align="center" width="85"><img src="jiaoben2613/images/logo.png" width="85" height="85" /></td>

<td>西南民族大学继续教育学院综合管理系统</td>

<td>欢迎系统管理员登录</td>

</tr>

<tr>

<td colspan="2">

<div><a href="#">新闻中心</a><a href="#">新闻中心</a><a href="#">新闻中心</a><a href="#">新闻中心</a><a href="#">新闻中心</a><a href="#">新闻中心</a></div>

</td>

</tr>

</table>

</div>

<div id="middle">

<div id="left"><p>左边</p><div style=" width:100pxheight:1000pxborder:1px #000 solid"></div></div>

<div id="right"><p>右边</p><div style=" width:100pxheight:1000pxborder:1px #000 solid"></div></div>

</div>

试试这样可以不?或者 你就用表格好了!