如何用DIV+CSS让导航的背景自适应浏览器宽度。见图片。

2024-11-05 21:52:25

推荐回答（5个）

回答（1）：

一般的简单的方法是设置导航容器宽度为百分比数值
利用背景图片自动横向重叠的方法来做
-----------
按照楼主说的图片不用背景图片的方式，那就要用前景图片，那你导航文字还要用绝对定位到图片上？？
这样这个导航就搞的太复杂了...
不用背景图片也不用前景图片的话就用H5的canvas绘图吧....更加复杂了低版本浏览器兼容性也不好
不知道楼主你想咋样了

回答（2）：

一般都是做背景居中，也一样可以适应。
你一定要图片宽度跟着浏览器宽度变化的话，html和body设置为100%，底下垫一层div，宽度设置100%，插入图片宽度设置100%，就可以了。
-----补充
红色菜单不用图片，只用css是可以实现的，使用border来画红色三角形部分，就解决了，不需要使用canvas。

红色菜单的定位的问题，可以使用flex，不过在老浏览器里兼容性不好，这个设计好像没有其他很好的解决办法，只能用flex。

回答（3）：

在html里面插入一个图片标签，设置这个图片的css，
position:absolute;//绝对位置
top:0;
left:0;
right:0
;z-index:-1;//置于最下层，
红色的导航普通写就可以了。

回答（4）：

你可以设置百分之百的宽度，或者是横向平铺

回答（5）：