html背景图片如何自适应大小?

html-css020

html背景图片如何自适应大小?,第1张

利用float+margin实现

.left{width:100pxfloat:left}

.center{float:leftwidth:100%margin-right:-200px}

.right{width:100pxfloat:right}

利用table实现

.parent{width:100%display:tabletable-layout:fixed}

.left,.center,.right{display:table-cell}

.left{width:100px}

.right{width:100px}

利用flex实现

.parent{display:flex}

.left{width:100px}

.center{flex:1}

.right{width:100px}

您好!很高兴为您解答问题,以下是我为您提供的解答内容:

新建一个html文档。

设置一下HTML的框架,然后把图片设置在同一个文件夹里面。

加入,这样可以有样式设置。

因为背景设置在主体,所以还要定义为body{}。

background-image:url(图片),这个是添加图片的意思。

然后我们需要加入background-repeat:repeat-x这个时候就会横向平铺。

无法按你说的理想实现。

但大神们一般不会去找盖茨非让他把这个功能加上,一般都是想个变通的方法。

首先我不知你为什么要用多个DIV,为什么要用同一张图片,为什么有大有小,为什么非得是背景。我给你说个思路,肯定行。

首先背景自适大小肯定行不通,那么不是背景的话,就是一张图片的话肯定可以行得通的(定义每个DIV宽高,里面的图片宽高),所以看代码吧

<div

style="position:relativewidth:300pxheight:200pxborder:1px

solid

redfloat:left">

<img

src="img/header_right.jpg"

style="width:300pxheight:200px">

<div

style="position:absolutetop:0pxleft:0px">这里放入内容1</div>

</div>

<div

style="position:relativewidth:200pxheight:100pxborder:1px

solid

redfloat:left">

<img

src="img/header_right.jpg"

style="width:200pxheight:100px">

<div

style="position:absolutetop:0pxleft:0px">这里放入内容2</div>

</div>

<div

style="position:relativewidth:100pxheight:50pxborder:1px

solid

redfloat:left">

<img

src="img/header_right.jpg"

style="width:100pxheight:50px">

<div

style="position:absolutetop:0pxleft:0px">这里放入内容3</div>

</div>