标签: background-position

我在许多网站上看过这个技巧,我想把它作为我自己的项目.
我有一个background.jpg非常大的图像,只是为任何屏幕尺寸做好准备.
我希望将背景图像居中到访客的窗口.
我的意思是,在滚动窗口时,内容会移动,但背景将保持原位 - 垂直和水平居中.

BTW大多数观众都会有旧的蹩脚PC,所以如果它是JS,最好不要闪烁.

我有一个带背景的div,我想在点击时改变背景的位置.

这是我的jQuery片段:

    $('#sprite').click(function() {
        $(this).css('backgroundPosition','-40px');
    });

虽然这工作正常,但我想通过"第二次"点击返回到原始位置,重置所有.

嗯,这就是所谓的"回调"吗？

我试过这样但它不起作用:

    $('#sprite').click(function() {
        $(this).css('backgroundPosition','-40px');
    },
    function() {
        $(this).css('backgroundPosition','40px');
    }
    );

谢谢你的任何信息.

晚上好!我有半个脚本需要在单击时更改元素的CSS背景位置 - 这样可以正常工作.但是我需要CSS在第二次点击时将背景位置重置为0 0;

非常感谢!

$(document).ready(function(){
$('#login-btn').click(function(){
                $('#login-btn').css('backgroundPosition', '0px -39px');
                 }, function(){
                $('$login-btn').css('backgroundPosition', '0px 0px');

             });
            });

我刚才读你是不是允许混合值,例如:background-position: top 50%;

但是,我不确定以下几行是否含糊不清:

background-position: 0 50%; //can the 0 be confused as 0px?
background-position: 0 50px; //can the 0 be confused as 0%?

我担心的是,它们可能以禁止的方式凝聚并导致意外的错误.

你认为这会发生吗？是什么让你这么想？

我试图实现这一点是否有一种简单的方法可以在点击事件中切换两个状态之间的背景位置？

我已经构建了一个应该工作的函数..没有得到线索为什么它不会.我花了几个小时试图为我的项目中这么乏味的部分实现这个目标,但这是必要的.

请看一下这个功能:

$("#secondarrow").click(function(){
    /*$(".arrows").toggle( 
    function(){ 
        $(this).css({"background-position":"0px 0px"}); 
    },  
    function(){ 
        $(this).css({"background-position":"0px -30px"}); 
    });*/
    /*$(".arrows").toggleClass(function() {
    if ($(this).is(".arrows")) {
    return ".arrowsup";
    } else {
    return ".arrows";
    }
    });*/
    $('#secondarrow').toggle(function() { 
    $("#arrow2").css('backgroundPosition', '0px -15px'); 
    }, function() { 
    $("#arrow2").css('backgroundPosition', '0px 0px'); 
    });
$("#ukmore").slideToggle(100);
$("#clause").slideToggle(100);
});

它应该做的是,在单击div名称第二个箭头时,它会显示许多子类别,同时从指向下方的箭头切换div子项的背景位置和id#arrow2(表示单击显示更多)向上指向的箭头,该箭头是同一背景图像的一部分(表示点击隐藏子类别).

我已经尝试了许多不同的功能结构,但它们都没有按要求工作,最新的一个 - 没有注释掉的 - 确实改变了背景位置以显示向上的箭头,但它只是在第一次单击AND仅在直接单击#arrow1 div时执行此操作,当我需要它来单击#secondarrow div时来回切换.

请帮忙.

我正在创建一个SASS mixin,它将让我拍摄社交媒体图标的spritesheet并显示它们,但是当它悬停在背景位置时我遇到问题,这是SASS代码:

@mixin social-button($imgurl,$xpos,$ypos,$height,$width) {
  background-image: url($imgurl);
  background-position: $xpos $ypos;
  display: block;
  float: left;
  height: $height;
  width: $width;    

  &:hover {
    background-position: 0px -$height;
  }

  & span {
    position: absolute;
    top: -999em;
  }
}

我的包括:

a.facebook {
  @include social-button("../img/social-buttons.png",0px,0px,26px,26px);
}

如果您想查看/使用spritesheet,我已在此处上传:http://i49.tinypic.com/2evtbwp.png

这也是HTML:

<a class="facebook" href="#"><span>Facebook</span></a>

基本上,悬停的CSS输出显示如下:

a.facebook:hover {
  background-position: -26px;
} 

在Firebug中它显示如下:

a.facebook:hover {
    background-position: -26px center;
}

非常感谢任何帮助,我对此时的错误感到非常难过..谢谢!

PS.我将创建其中的5个,所以我不介意创建一个可以自动为我生成的循环,但是目前这不是一个大问题,只需要让悬停工作首先!

我这里有这个代码......

.madactive{background: url(/graphics/madarrow.jpg) no-repeat center top 20px !important;}

但是图像不再出现了,我检查了元素并且css被划掉了......

我想要做的是在我的背景图像上放置一个顶部.

我究竟做错了什么？

当我把以下内容放入div主要内容时body,这个工作:

<div style="display: block; width:100%; height: 100%; min-height: 100vh; background-color: #FFFFFF; background: url(./images/pic.jpg); background-position: center; background-repeat: no-repeat; background-size: cover; background-attachment: fixed;">

但是,当我使用CSS时,它不工作:

<style type="text/css" media="all">
.myMainDiv {
    width:100%;
    height: 100%;
    min-height: 100vh;
    background-color: #FFFFFF;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    background-attachment: fixed;
}
</style>

<div class="myMainDiv" style="display: block; background: url(./images/pic.jpg);">

这似乎是错误的,因为我需要为每个背景提供不同的图片,然后这会导致background-repeat等等被忽略.(注意:不同的div也会有不同的显示值,无论是块还是无,所以它们也需要单独说明,但这不是问题.)

任何人都知道为什么以及是否有解决方法.

background:transparent url(../img/fondo_footer.png) repeat-x scroll;
background-position: 0px 140px;

这样,背景垂直移动

background:#01244e;
background-position: 0px 140px;

这样,不是

我怎么解决这个问题？

我正在使用以下代码让我的按钮在悬停时更改为翻转状态.

$('.button').hover(function(){
$(this).css('background-position', '0 -23px');
}, function(){
$(this).css('background-position', '0 0px');
});

使用.button类应用于所有按钮div,使用background-position函数,其中所有背景图像在同一图像中具有所有三种状态 - 在'0 0px'显示正常状态,在'0 -23px'显示翻转状态,并在'0 -46px'显示活动状态.

我正在试图弄清楚如何让我的按钮在点击时显示它们的活动状态,同时让所有其他.button按钮恢复到正常状态.我尝试了下面的代码,将按钮更改为活动状态,但当鼠标从按钮上移开时,它们会恢复到正常状态.

$('.button').click(function(){
$(this).css('background-position', '0 -46px');
});

谢谢!

这是一个例子。我想裁剪背景图像，然后使用裁剪后的图像作为更大（尺寸）元素的背景。我的意思是 div 比它的背景大，而且我不需要重复。现在，当background-repeat取消注释时，元素就会消失。但我认为它会显示裁剪后的不重复背景。

#div {
  background-image: url(http://dummyimage.com/600x400/000/fff);
  padding: 10px;
  width: 100px;
  height: 100px;
  background-position: 0px -100px;
  background-size: 100px 100px;
  background-repeat: no-repeat;  /*comment this*/
  position: absolute;
}

<div id="div"></div>