关于Html背景图自适应容器大小的问题

Posted 2023-04-13

我想为一个div设置一个背景图background-img，但这个div的大小目前还不确定。所有只能让背景图自适应div大小。目前的解决方案是：创建俩个子div层叠，一个放背景图，置于底层；一个放内容，置于顶层。问题是怎样使position:absolute;属性是相对与我的父div而不是相对与页面的呢？也就是父容器活动，怎样使子div层叠。

参考技术A 如果只是要设置一个背景的话，样式里面写background-image:就背景就应该是在后面了，div里面的内容或者是子div都应该是在背景前面的。俩个子div层叠来做背景和内容感觉弄复杂了呢。如果你要做定位的话，应该在父div用相对属性position: relative; 在子div用绝对属性position: absolute;div的层级用z-index:来控制，比如z-index:-1 z-index:1 z-index:2，这个属性值越大div就越在上层,越小越在下面。追问

这些我知道，我只是想让背景图可以根据容器大小自动伸缩，而且上面还可以显示其他内容，所有才搞得这么复杂。

参考技术B 将你的父级div的position设置成relative就可以了本回答被提问者采纳

html中如何使背景图铺满整个网页？

HTML中在<style>标签中添加什么css样式可以使背景图自适应网页大小，
网页如何缩放都能使背景图铺满整个网页且背景图不重复？

您好!很高兴为您解答问题,以下是我为您提供的解答内容：
新建一个html文档。
设置一下HTML的框架，然后把图片设置在同一个文件夹里面。
加入，这样可以有样式设置。
因为背景设置在主体，所以还要定义为body。
background-image:url(图片)，这个是添加图片的意思。
然后我们需要加入background-repeat:repeat-x;这个时候就会横向平铺。 参考技术A 新建一个html文档。
设置一下HTML的框架，然后把图片设置在同一个文件夹里面。
加入，这样可以有样式设置。
因为背景设置在主体，所以还要定义为body。
background-image:url(图片)，这个是添加图片的意思。
然后我们需要加入background-repeat:repeat-x;这个时候就会横向平铺。本回答被提问者采纳