本文实例讲述了CSS实现菜单背景自适应宽度的方法。分享给大家供大家参考。具体如下：
为了让菜单看上去更漂亮一些，我们都喜欢用图片去修饰菜单的背景，如果是规则图片，那很好实现，但是如果菜单的背景是不规则的，我们应该如何让它的宽度随着菜单的文字多少而自动适应宽度变化呢？通过这个菜单实例，你将会明白其中的原由。
先来看运行效果截图：
在线演示地址如下：
http://demo.jb51.net/js/2015/css-auto-width-bg-pic-demo/
具体代码如下：
复制代码代码如下:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>菜单背景自适应</title>
<style type="text/css">
<!--
.load {
background: url(images/9_o.png) no-repeat right;
position: absolute;margin-left:5px;
}
.load span {
height: 66px;
background: url(images/9_o.png) no-repeat;
display: block;
font-size: 14px;
line-height: 66px;
font-weight: bold;
padding-left: 115px;
margin-right: 15px;
margin-left: -5px;
}
-->
</style>
</head>
<body>
<div class="load"><span>网站</span></div>
<div class="load" style="top:100px"><span>提供最新的网络编程、脚本编程、网页制作、网页设计、网页特效。</span></div>
</body>
</html>
希望本文所述对大家的CSS网页设计有所帮助。
免责声明：本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除！
更新日志
- 黄妃.2020-色違【米乐士娱乐】【FLAC分轨】
- LouisHayes-ArtformRevisited(2024)[24Bit-96kHz]FLAC
- 永恒英文金曲精选5《TheBestOfEverlastingFavouritesVol.5》[WAV+CUE]
- 黑鸭子2005-紫丁香[首版][WAV+CUE]
- 林忆莲《爱上一个不回家的人》XRCD版[低速原抓WAV+CUE][999M]
- 经典《历届奥斯卡金曲回顾》[正版原抓WAV+CUE] [1G]
- 群星《试音草原·女声篇》经典蒙古民歌[WAV+CUE][1G]
- 炉石传说月末上分卡组推荐 国服月末最快上分卡组推荐
- 炉石传说月底最强卡组有哪些 2024国服月底最强卡组推荐
- 炉石传说月初最强卡组有哪些 2024月初最强上分卡组推荐
- 狼人杀亮相原生鸿蒙之夜 假面科技强势登陆华为生态
- 12小时光线挑战!AI画质专家才是大平层首选
- 2024游戏IP报告：1~9月规模1960亿 68%用户愿为之付费
- 群星.2024-今夜一起为爱鼓掌电视剧原声带【相信音乐】【FLAC分轨】
- BIGFOUR.2013-大家利事【寰亚】【WAV+CUE】