代码之家 › 专栏 › 技术社区 › davethecoder

如何在整个html正文的设置位置内显示CSS精灵的部分

css-sprites xhtml css html

davethecoder · 技术社区 · 16 年前

它就像一个弯曲的方块,左手边的内容框会稍微超出它的顶部。

然而,我似乎不能得到一个精灵的一部分作为背景定位在底部。

现在通常你会这样做

background:url(sprite.png) -20px -144px no-repeat; display:block; width:800px; height:225px;

但是当我尝试这样的事情时

background-color: #ffffff;
font-size: .75em;
font-family: Verdana, Helvetica, Sans-Serif;
margin: 0;
padding: 0;
color: #000000;
height:100%;
width:800px;
background-image:url(images/sprite.jpg); 
background-position:0 0 no-repeat bottom left;

我得到完整的精灵表作为背景。。。。。所以我的问题是,有可能只得到一个精灵的一部分吗并将该部分用作div的底部部分!!!!

有点言过其实,但我不想仅仅是拒绝这个想法,如果它可以做到,有人已经做到了。

3 回复 | 直到 16 年前

Traingamer 16 年前

将其放入页脚部分内的嵌套固定大小div中。如果您希望页脚div增长,但不希望精灵的大小超过其限制,那么这几乎是唯一的方法。

davethecoder 16 年前

你好,谢谢,无法在身体上进行,所以我添加了一个容器div:

min-height: 100%; height: auto !important; height: 100%; margin: 0 auto -4em; background:url(images/sprite.jpg) no-repeat;     clip:rect(0,800px,270px,0); position:absolute;

请原谅它在一行,这个框不允许我在一个块中添加所有代码!!!!

-1

Steve Wortham 16 年前

那么,您试图在一个容器中显示图像的一部分,它比您想要显示的部分大?

如果是,请检查“剪辑”属性。下面是一个例子:

#myDiv {
   width:400px; height:300px;
   background:url(sprite.png);
   clip:rect(100px,250px,150px,100px);
   position:absolute;
}

http://www.julienlecomte.net/blog/2007/07/4/

推荐文章

Luis Pavez · 在actionListener完成之前更新组件

8 年前

mike · 使用类似封送处理的编码器操纵HTML

8 年前

ajaysheoran2323 · 如何使网站多语言[关闭]

8 年前

Hanlei Price · 标记验证

8 年前

Irum · 获取错误:UI指令无法强制转换到组织。素数面。模型菜单菜单元素

8 年前

curiousToKnow · 如何从xhtml获取文本

8 年前

zinon · XHTML渲染生成空pdf文件

8 年前

saurabh · 如何在一个页面中使用多个ajax日历

9 年前

Gabriel Cardoso · 更新数据后在datatable中更新

9 年前

mac wac · AngularJS的内联模板不适用于XHTML

9 年前