背景职位

Question

此图像我用于制作3个方向的动画。 我只需要显示此图像的第一个字符。我正在使用背景位置 -

background-position:0px 200px;

但它在这里显示完整的图像。

样式

position:absolute;
    top: 40px;left: 40px;
background-position: 0px 200px;

图像 -

请引导我通过Js小提琴。 Fiddle

Answer 1

试试这个

img{
clip:rect(0px,300px,auto,0px);
position:absolute;
}

Answer 2

您正在使用img但background-position属性不适用于img元素，您需要在CSS中使用background-image属性并需要设置元素的宽度这里，如果字符宽度在100px左右，高度为200px，则分别设置为height和width为200px和100px

<div></div>

div {
   height: 200px;
   width: 100px;
   background-image: url();
   background-position: ;
   background-repeat: no-repeat;
   /* Other styles goes here */
}

Answer 3

您必须将此图像作为背景放在div中，然后使用background-position属性。

background-position仅在您使用背景图片时才有效。

LIVE DEMO

Answer 4

请参阅此链接，希望这对您有所帮助：http://jsfiddle.net/9RYph/7/

div {

    top: 40px;left: 40px;
    background-size:100%;
    background:url('http://i.stack.imgur.com/PuAjg.jpg');
    width: 50%;
    height: 600px;
}

Answer 5

您需要在#character ID：

中设置背景图片

background: url(http://img391.imageshack.us/img391/432/scorpionortholp0.jpg)

然后添加width和height属性以满足您的需求。