如何用DIV+CSS让导航的背景自适应浏览器宽度。见图片。
图片上那条红色的导航，不用背景图片，只用CSS能否实现，
自适应浏览器分辨率，写出简单代码。现在图片是1920px的宽度，要可以在1366px分辨率及更高的分辨率自动适应。
一般的 简单的方法是设置导航容器宽度为百分比数值
利用背景图片自动横向重叠的方法来做
-----------
按照楼主说的图片不用背景图片的方式，那就要用前景图片，那你导航文字还要用绝对定位到图片上？？
这样这个导航就搞的太复杂了...
不用背景图片也不用前景图片的话就用H5的canvas绘图吧....更加复杂了 低版本浏览器兼容性也不好
不知道楼主你想咋样了
利用背景图片自动横向重叠的方法来做
-----------
按照楼主说的图片不用背景图片的方式，那就要用前景图片，那你导航文字还要用绝对定位到图片上？？
这样这个导航就搞的太复杂了...
不用背景图片也不用前景图片的话就用H5的canvas绘图吧....更加复杂了 低版本浏览器兼容性也不好
不知道楼主你想咋样了
温馨提示：答案为网友推荐，仅供参考
第1个回答 2016-11-17
一般都是做背景居中，也一样可以适应。
你一定要图片宽度跟着浏览器宽度变化的话，html和body设置为100%，底下垫一层div，宽度设置100%，插入图片宽度设置100%，就可以了。
-----补充
红色菜单不用图片，只用css是可以实现的，使用border来画红色三角形部分，就解决了，不需要使用canvas。
红色菜单的定位的问题，可以使用flex，不过在老浏览器里兼容性不好，这个设计好像没有其他很好的解决办法，只能用flex。
你一定要图片宽度跟着浏览器宽度变化的话，html和body设置为100%，底下垫一层div，宽度设置100%，插入图片宽度设置100%，就可以了。
-----补充
红色菜单不用图片，只用css是可以实现的，使用border来画红色三角形部分，就解决了，不需要使用canvas。
红色菜单的定位的问题，可以使用flex，不过在老浏览器里兼容性不好，这个设计好像没有其他很好的解决办法，只能用flex。
第2个回答 2016-11-17
在html里面插入一个图片标签，设置这个图片的css，
position:absolute;//绝对位置
top:0;
left:0;
right:0
;z-index:-1;//置于最下层，
红色的导航普通写就可以了。
position:absolute;//绝对位置
top:0;
left:0;
right:0
;z-index:-1;//置于最下层，
红色的导航普通写就可以了。
第3个回答 2016-11-17
你可以设置百分之百的宽度，或者是横向平铺
第4个回答 2016-11-17
<body style="width:100%;">
<div style="width:100%;">
<img style="width:100%;" src="daohang.jpg">
</div>
</body>
<div style="width:100%;">
<img style="width:100%;" src="daohang.jpg">
</div>
</body>
相似回答