JQuery ui手风琴组合标题中的内容?
如何使用jQuery手风琴并在流入标题的内容中具有背景图像? 我已经能够使标题透明,但我似乎无法将它们结合起来。我不知道这是否可能,因为它们是分开的JQuery ui手风琴组合标题中的内容?,jquery,css,jquery-ui,accordion,Jquery,Css,Jquery Ui,Accordion,如何使用jQuery手风琴并在流入标题的内容中具有背景图像? 我已经能够使标题透明,但我似乎无法将它们结合起来。我不知道这是否可能,因为它们是分开的h3和div <style type="text/css"> html,body{ height: 100%; } .ui-accordion-content{ background:url('{{ url_for('static',filename='img/building_img/4/bg4_black.jpg') }}'); ba
h3
和div
<style type="text/css">
html,body{
height: 100%;
}
.ui-accordion-content{
background:url('{{ url_for('static',filename='img/building_img/4/bg4_black.jpg') }}');
background-size: cover;
background-repeat: no-repeat;
}
</style>
<div id="accordion2">
<h3>building.name</h3>
<div>
<p>Mauris mauris ante, blandit et, ultrices a, suscipit eget.
Integer ut neque. Vivamus nisi metus, molestie vel, gravida in,
condimentum sit amet, nunc. Nam a nibh. Donec suscipit eros.
Nam mi. Proin viverra leo ut odio.</p>
</div>
</div>
<script>
$(function(){
$( "#accordion2" ).accordion({
heightStyle: "fill"
});
$(window).resize(function(){
// update accordion height
$( "#accordion2" ).accordion( "refresh" )
});
})
</script>
html,正文{
身高:100%;
}
.ui手风琴内容{
背景:url({url_for('static',filename='img/building_img/4/bg4_black.jpg')});
背景尺寸:封面;
背景重复:无重复;
}
building.name
莫里斯·莫里斯·安特、布兰迪·埃特、奥特莱斯a、苏西比特·埃特。
整数ut neque。Vivamus nisi metus,molestie vel,年的孕妇,
调味品坐在阿梅特,努克。南阿尼布。Donec suscipit Peros。
南美。维韦拉·利奥·奥迪奥
$(函数(){
$(“手风琴2”)。手风琴({
高度样式:“填充”
});
$(窗口)。调整大小(函数(){
//更新手风琴高度
$(“手风琴2”)。手风琴(“刷新”)
});
})
我只是玩了一下CSS,得到了您想要的效果:
html, body {
height: 100%;
}
.ui-accordion .ui-accordion-content {
background: url('http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png');
background-repeat: repeat; /* changed the background for demo purposes only*/
position:relative;
top:-40px;
z-index:1; /* used position and z-index to get the header to overlap the content */
padding-top:20px; /* keep the text below the header */
}
#accordion2 h3{
background:#fff url('http://cdn.sstatic.net/stackoverflow/img/apple-touch-icon.png');
background-repeat: repeat; /* use the same background img for the header and content, but be sure to add a color to the header */
position:relative;
z-index:2; /* used position and z-index to get the header to overlap the content */
}
你为什么用双花括号{{在背景中,您在html上使用id,然后您试图使用不同名称的类来应用它。这对我来说没有意义。@C-Link这是python jinja模板。@janharold这是css中的一个jquery ui类。您确实这样做了。这仅仅是因为图像在每个类上的位置相同吗?@user974407您可能需要调整背景图像的位置取决于您使用的图像,但总体方法应该可行