背景图片始终与顶部对齐 [英] background image always align to top
本文介绍了背景图片始终与顶部对齐的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我正在开发一个wordpress菜单。我的子菜单图像很少弯曲到角度。为了更好的理解，我附上了图片。我的问题与子菜单有关。
背景图片
我希望子菜单背景图像能够根据内容进行解释。我的意思是，如果我有2个子菜单菜单，那么我不想显示完整的高度子菜单背景
请建议我如何实现此目的。
html
< ul id =menuclass = NAV-主 >
< li>< a href =<？php bloginfo（'url'）;？>> HOME< / a>< / li>
< li> < a href =<？php bloginfo（'url'）;？> />菜单1< / a>
< ul class =nav-sub submenuMenu1>
< li>< a href =>< / a>< / li>
< li>< a href =>< / a>< / li>
< li>< a href =>< / a>< / li>
< / ul>
< / li>
< li> < a href =<？php bloginfo（'url'）;？>>菜单2< / a>
< ul class =nav-sub submenuMenu2>
< li>< a href =>< / a>< / li>
< li>< a href =>< / a>< / li>
< li>< a href =>< / a>< / li>
< / ul>
< / li>
< li> < a href =<？php bloginfo（'url'）;？>>菜单3< / a>
< ul class =nav-sub submenuMenu3>
< li>< a href =>< / a>< / li>
< li>< a href =>< / a>< / li>
< li>< a href =>< / a>< / li>
< / ul>
< / li>
< li> < a href =<？php bloginfo（'url'）;？> / fundraise />菜单4< / a>
< ul class =nav-sub submenuMenu4>
< li>< a href =>< / a>< / li>
< li>< a href =>< / a>< / li>
< li>< a href =>< / a>< / li>
< / ul>
< / li>
#menu {
width：550px;
height：auto;
float：left;
margin：23px 0 0 62px;
}
#menu li {
margin：0 0 0 0;
list-style-type：none;
}
#menu a {
font-size：14px;
font-weight：bold;
padding：0 0 0 23px;
text-decoration：none;
text-shadow：0.1em 0.1em＃666;
}
ul.main-nav，ul.main-nav li {
list-style：none;
保证金：0;
padding：0;
}
.main-nav {
z-index：597;
}
.main-nav li：hover> ul {
visibility：visible;
}
.main-nav li.hover，.main-nav li：hover {
z-index：599;
光标：指针;
}
.main-nav li {
float：left;
display：block;
}
.main-nav li a {
float：left;
display：block;
保证金：0！重要;
}
ul.nav-sub {
visibility：hidden;
位置：绝对;
padding：0;
top：0;
剩下：0;
z-index：598;
}
ul.nav-sub li {
list-style：none;
display：block;
padding：0;
float：left;
padding：5px;
}
ul.nav-sub li a {
font-size：12px！important;
font-weight：bold;
text-shadow：0.1em 0.1em＃666;
text-transform：大写;
}
ul.nav-sub a：hover {
text-decoration：underline！重要;
}
.submenuMenu {
width：649px;
height：264px;
float：left;
margin：39px 0 0 3px;
padding：11px 0 0 0！important;
background：url（../ img / bg_submenu.png）-1px 0 no-repeat;
}
.submenuMenu li {
width：300px！important;
保证金：0！重要;
填充：5px 200px 5px 117px！important;
}
我的subMenu类具有子菜单背景。我知道这不是理想的代码，但我只想知道如何根据内容将其粘贴到顶部，而背景图像弯曲到一定角度。 解决方案
删除为submenuMenu指定的高度。将高度作为自动添加
.submenuMenu {
width：649px;
height：auto;
float：left;
margin：39px 0 0 3px;
padding：11px 0 0 0！important;
background：url（../ img / bg_submenu.png）left bottom no-repeat，＃f4bfd5;
}
确保图片的高度为25-30px，剩余空间你可以给背景色。
I am working on a wordpress menus. my sub menu image is little bend to angle. I have attached the image for better understandings. My problem is concerned with sub menu.
background image
I want the sub menu background image to expland according to content. I mean if I am having 2 sub menus menus then I dont want to show full heighted sub menu background
Please suggest how I can achieve this.
html
<ul id="menu" class="nav-main">
<li><a href="<?php bloginfo( 'url' ); ?>">HOME</a></li>
<li> <a href="<?php bloginfo( 'url' ); ?>/">Menu 1</a>
<ul class="nav-sub submenuMenu1">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</li>
<li> <a href="<?php bloginfo( 'url' ); ?>">Menu 2</a>
<ul class="nav-sub submenuMenu2">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</li>
<li> <a href="<?php bloginfo( 'url' ); ?>">Menu 3</a>
<ul class="nav-sub submenuMenu3">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</li>
<li> <a href="<?php bloginfo( 'url' ); ?>/fundraise/">Menu 4</a>
<ul class="nav-sub submenuMenu4">
<li><a href=""></a></li>
<li><a href=""></a></li>
<li><a href=""></a></li>
</ul>
</li>
#menu {
width: 550px;
height: auto;
float: left;
margin: 23px 0 0 62px;
}
#menu li {
margin: 0 0 0 0;
list-style-type:none;
}
#menu a {
font-size: 14px;
font-weight: bold;
padding: 0 0 0 23px;
text-decoration: none;
text-shadow: 0.1em 0.1em #666;
}
ul.main-nav, ul.main-nav li {
list-style: none;
margin: 0;
padding: 0;
}
.main-nav {
z-index: 597;
}
.main-nav li:hover > ul {
visibility: visible;
}
.main-nav li.hover, .main-nav li:hover {
z-index: 599;
cursor: pointer;
}
.main-nav li {
float:left;
display:block;
}
.main-nav li a {
float: left;
display:block;
margin: 0!Important;
}
ul.nav-sub {
visibility: hidden;
position: absolute;
padding:0;
top: 0;
left: 0;
z-index: 598;
}
ul.nav-sub li {
list-style:none;
display:block;
padding: 0;
float: left;
padding: 5px;
}
ul.nav-sub li a {
font-size: 12px!important;
font-weight: bold;
text-shadow: 0.1em 0.1em #666;
text-transform:uppercase;
}
ul.nav-sub a:hover {
text-decoration: underline!Important;
}
.submenuMenu{
width: 649px;
height: 264px;
float: left;
margin: 39px 0 0 3px;
padding: 11px 0 0 0!important;
background: url(../img/bg_submenu.png) -1px 0 no-repeat;
}
.submenuMenu li {
width: 300px!important;
margin: 0!Important;
padding: 5px 200px 5px 117px!important;
}
my subMenu class is having the sub menu background. I know this is not ideal code but I only wanted to know how to stick it to top according to content while background image is bend to an angle.
解决方案
Remove the height specified for submenuMenu. Add height as auto
.submenuMenu{
width: 649px;
height: auto;
float: left;
margin: 39px 0 0 3px;
padding: 11px 0 0 0!important;
background: url(../img/bg_submenu.png) left bottom no-repeat, #f4bfd5;
}
Make sure that your image is of 25-30px height and for the remaining space you can give background-color.
这篇关于背景图片始终与顶部对齐的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
