html - 背景职位

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元素，您需要background-image在 CSS 中使用属性并且需要在此处设置元素的宽度，因此如果字符宽度是 , 的周围100px和高度，则分别200px设置height和widthas200px和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仅当您使用背景图像时才有效。

现场演示

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

你需要在#characterid中设置背景图片：

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

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