javascript - jQuery 调整背景图像的大小

Question

我现在开始使用 javascript 和 CSS，而且我被困在一个测试元素中。
我在下面所做的是根据其他来源的搜索所做的，所以我不知道是否有任何东西完全在正确的位置，可能不是。
所以，我尝试根据窗口大小调整图像大小。
我用标题做了它，但不能让它适用于我的导航栏背景。

CSS:

.menutop {
  background: url('Images/topo1.png') no-repeat top center;
  height: 50px;
  font-family:  'StreamArtsFont';
  text-align: center;
  -webkit-animation: changeColor 30s infinite;
}

脚本:

jQuery(document).ready(function($){
    function fullscreen(){
  //Header size change
        jQuery('#header').css({
            width: jQuery(window).width(),
            height: jQuery(window).height()
        });
  //Navbar size change
        jQuery(".menutop").css("background-size", 'auto '+jQuery(window).height()+" cover");
    }

基本上，我需要做的是使用“jQuery(window).height()”提供的值更改 background-size 元素中的高度值，就像我对标题所做的那样。我正在想象“auto”和 jQuery(window).height() 有问题，因为当我只使用“cover”时它起作用了。谢谢!

Answer 1

background-size 只需要 2 个值，而不是 3 个。并且 $(window).height() 将返回一个整数。您需要将 px 附加到该字符串，以便它知道您要使用哪种单位。

我假设你想改为这样做。

jQuery(".menutop").css('background-size', 'auto '+jQuery(window).height() + 'px');