2

私の html ファイルでは、SpryTabbledPanels プラグインを使用しました。その中に 3 つの 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 タグのスクリーンショット2 番目の div タグのスクリーンショット

4

4 に答える 4

2

背景画像の高さと幅を定義する 2 つのサンプル CSS クラスを作成できます。まあ言ってみれば...

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

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

したがって、ここで y1 < y2 つまり、class1 は、背景画像を小さなものにしたい場合に背景画像要素に適用する必要があるクラスです。最初の div タグの onclick。また、3 div タグをクリックすると (画像のサイズを大きくしたい場合)、画像のクラスを class2 に切り替えるだけです。そのため、画像が大きくなります。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 に答える
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 に答える
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 に答える