如何减少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标签中的背景图片？

回答

相关问题