2

在我的 html 文件中，我使用了 SpryTabbledPanels 插件。其中有三个 div 标签。在一个 div 标签中，我的数据较少，而在另一个 div 标签中，我的数据较多。我为此使用了悬停。当我将鼠标悬停在第一个 div 标签上时，它会显示数据。但底部有很多空白空间，在另一个 div 标签中没有太多空间。那么请问我可以更改div标签中背景图像的高度吗？

以下是背景图片的css：

#main-content {
    /*margin:0px 225px;*/
    margin-left:auto;
    margin-right:auto;
    margin-top:35px;
    width:900px;
    /*width:100%;*/
    height:auto;
    /*height:1053px;*/
    /*background: -moz-linear-gradient(top,  #fff , #ccc);
    background: -webkit-gradient(linear, left top, left bottom, (#E5E5E5) to(#ccc));
    background: filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#ffffff', EndColorStr='#000000.');*/

    border-top-left-radius:48px;
    border-top-right-radius:48px;
    border-bottom-left-radius:48px;
    border-bottom-right-radius:48px;
    padding-bottom:20px;
    min-height:1450px;
    background:url(res/back-img.png) repeat;

    }

以下是截图：

第一个 div 标签的屏幕截图第二个 div 标签的屏幕截图

4

4 回答 4

2

有一个简单的技巧你可以做你的 html 例如应该看起来像

<div id="main-content">
    <img src="res/back-img.png"  />
    <p>some content</p>
</div>

你的CSS应该看起来像：

#main-content{
    position: relative;
    /* the  rest of your css */
}
#main-content img{
    width: 100%;
    height: 100%;
    z-index: -10;
    position: absolute;
}

这将使图像像背景图像一样，并根据主内容 div 的宽度和高度进行更改

于 2013-03-28T14:26:26.593 回答
2

您可以创建 2 个示例 CSS 类，它们将定义背景图像的高度和宽度。比方说...

     .class1{
         width : x1 px;
         height : y1 px;
     }

     .class2{
        width : x2 px;
        height : y2 px;
     }

所以这里 y1 < y2 意思是 class1 是当你希望背景图像更小时应该应用于背景图像元素的类，即；onclick 第一个 div 标签。此外，当您单击 3 div 标签时（当您希望图像的大小更大时）只需将图像的类切换到类 2。所以图像会更大。在 jQuery 中，你可以很容易地做到这一点，因为..

    $("get ur image element here").class("class1"); //whwen u want image to be samller

    $("ur image element").class("class2"); //when u want the image to be larger

祝你好运。

于 2013-03-29T08:35:31.520 回答
1 
div {
    width:50px;
    height:100px;
    background:red;
}
于 2013-03-28T12:34:44.427 回答
1

这是jquery来改变背景图片的高度，我们可以给任意的高度。

$(document).ready(function(){
    $("#tab1").hover(function(){
    var height = 1000;
    $('#main-content').height(height);
    });
    $("#tab2").hover(function(){
    var height = 1200;
    $('#main-content').height(height);
    });
    $("#tab3").hover(function(){
    var height = 1400;
    $('#main-content').height(height);
    });
});
于 2013-03-29T12:01:01.880 回答