背景职位答案

【问题标题】：Background positions背景职位
【发布时间】：2013-02-07 05:35:06
【问题描述】：

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

background-position:0px 200px;

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

样式

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

图片-

请指导我完成 Js fiddle。 Fiddle

【问题讨论】：

标签： html css background-image background-position

【解决方案1】：

试试这个

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

【讨论】：

【解决方案2】：

查看此链接，希望对您有所帮助：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;
}

【讨论】：

【解决方案3】：

您正在使用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 */
}

【讨论】：

【解决方案4】：

你必须把这张图片作为背景放在一个div中，然后使用background-position属性。

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

LIVE DEMO

【讨论】：

谢谢，我得到了我想要的。

【解决方案5】：

需要在#character id中设置背景图片：

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

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

【讨论】：