it-swarm.cn

使用Css Sprites和背景位置

我有一个div元素,比如宽度为200px,高度为200px。我需要一个小图像出现在div的右上角。人们通常如何做到这一点

background: url(/images/imagepath.png) top right;

但问题是,我正在从Sprite加载图像,当我使用类似的东西时

background: url(/web/images/imagepath.png) -215px -759px  top right;

sprite似乎没有从正确的位置选择它。 Sprite的其他部分已加载。是否可以从Sprite加载图像并使用background-position属性。提前致谢...

18
Maxim Dsouza

您需要以两种不同的方式指定元素位置和背景位置的坐标。

#yourimage {
  background-image: url(/web/images/imagepath.png);
  /* background coordinates */
  background-position: -215px -759px;

  /* element coordinates */
  position:absolute;
  left: 0;  /* 0px from the left */
  top:  0;  /* 0px from the top  */
}

使用background-position指定背景坐标。对于元素的坐标,您需要设置leftright属性。

请记住,为了使用精灵,您的元素必须具有正确的大小。您用作背景的图像必须有足够的空间来覆盖元素的宽度和高度,而不是更多,否则您将从精灵图像中看到多个图像。

如果要显示小于元素的图像,则需要在较大元素内部使用较小的元素。

<div id="container">
  <div class="background"></div>
  my content here
</div>

然后在你的CSS中

#container {
  position:relative;
  width: 200px;  /* size of your big element */
  height: 200px;
}
#container .background {
  background: url(/web/images/imagepath.png) -215px -759px;
  width:  50px; /* width and height of the Sprite image you want to display */
  height: 50px;
  position: absolute;
  top: 0;
  left: 0;
}
29
Jose Faeti

您可以像这样使用:before伪类:

.element:before {
   content:"";
   position:absolute;
   right:0;
   top:0;
   width:20px;
   height:20px;
   background: url(/web/images/imagepath.png) -215px -759px;
}

但这支持得很差。

我的建议是在你的包装中创建另一个元素,并将它放在:before之上,但是例如真正的div

_编辑_

在盒子角落使用精灵的另一个棘手的方法是这里描述

13
avall

如果您可以使用像SCSS这样的预处理器:

(更新到实际回答问题;还看 实例

// ----------- only things you need to edit { ---------------
$Sprite-size: 16px; // standard Sprite tile size
$Sprite-padding: 0px; // if you have padding between tiles
// ----------- } only things you need to edit ---------------

// basic Sprite properties (extension-only class)
%Sprite {
    width:$Sprite-size; height:$Sprite-size; // must restrict viewport, otherwise other sprites may "bleed through"
    // could set shared standard tilesheet `background-image: url(...)`
    // other standard styles, like `display:inline-block` or `position:absolute`
}

// helper for assigning positioning using friendlier numbers like "5" instead of doing the math
@mixin Sprite-offset($xoffset:0, $yoffset:0, $increment:$Sprite-size, $padding: $Sprite-padding) {
    background-position: -($xoffset*($increment + $padding)) -($yoffset*($increment + $padding));
}

从Sprite“浮动”背景,比如 @ jose-faeti的答案 表示你必须 涉及占位符元素

<div class="float-bg">
    <div class="bg"></div>
    <p>Lorem ipsum dolor si...</p>
</div>

风格如:

.float-bg .bg {
    @extend %Sprite; // apply sizing properties
    background-image: url(...); // actually set the background tiles

    @include Sprite-offset(4);

    // specific configuration per accepted answer
    position:absolute;
    top: 0;
    right: 0;
}

在我的原始答案中, 创建一个按钮列表 ,您可以:

// list out the styles names for each button 
$buttons: 'help', 'font', 'layerup', 'layerdown', 'transform', 'export', 'save', 'clear', 'move-left', 'move-right', 'move-up', 'move-down', 'png', 'jpg', 'svg', 'funky';

.btns > * { @extend %Sprite; background-image:... } // apply sizing properties, bg

// autoassigns positioning
@for $i from 1 through length($buttons) {
    $btn: nth($buttons, $i);
    .btn-#{$btn} {
        // @extend .Sprite;
        @include Sprite-offset( $i - 1 );
    }
}

然后会工作

<ul class="btns">
    <li class="btn-help">...</li>
    <li class="btn-font">...</li>
    <li class="btn-save">...</li>
    <li class="btn-export">...</li>
    <li class="btn-etc">...</li>
    <li class="btn-etc">...</li>
</ul>
2
drzaus

您可以指定top right或精确的像素位置,而不是两者。

此外,您无法加载图像Sprite的一小部分作为更大元素的背景。你必须在里面放一个小元素,它有Sprite的大小。

0
GolezTrol

使用background-Origin而不是background-position签出。

你只能指定一个背景位置,现在你有两个(-215px -759px)和(右上角)。

0
bdparrish