如何減少div標籤中的背景圖片？

在我的html文件中，我使用了SpryTabbledPanels插件。在那裏有三個div標籤。在一個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; 

    }

以下是截圖：

Screenshot of 1st div tag screenshot of second div tag

來源

2013-03-28 Anand Jaju

檢查此主題http://stackoverflow.com/questions/1341358 – 2013-03-28 11:17:27

這是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-29 12:01:01

div { 
    width:50px; 
    height:100px; 
    background:red; 
}

來源

2013-03-28 12:34:44

有一個簡單的技巧，你可以做您例如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; 
}

這將使圖像用作背景圖像和改變根據主conent div的寬度和高度

來源

2013-03-28 14:26:26 A7S

您可以創建2 samle CSS類將定義背景圖像的高度和寬度。比方說......

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

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

所以這裏Y1 < Y2 Class1的意思是你應該適用於您的背景圖像元素，當你想的背景圖像是samll即類;第一個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-29 08:35:31 akki

如何減少div標籤中的背景圖片？

回答

相關問題