Question

我想为我的图标使用CSS Spritesheet。每个图标图像的大小均为48x48px。但是，我希望能够显示任意尺寸的图标。

现在，我正在使用，显示24x24图标，我使用：

<div style="width:24px;height:24px;display:inline-block"> <div class="tab-achievement sprite" style="transform:scale(0.5);transform-origin:0 0"></div> </div>

有更短的方法吗？例如，使用::before和::after。

最终，我想要像：

<div class="img24x24 tab-achievement sprite"></div>

演示目标：使用Hello World显示正确的图标。

	.sprite {display:inline-block; overflow:hidden; background-repeat: no-repeat;background-image:url(http://puu.sh/nWh8y.png);}

.tab-achievement {width:48px; height:48px; background-position: -48px -48px}

<div>
<div style="width:24px;height:24px;display:inline-block">
	<div class="tab-achievement sprite" style="transform:scale(0.5);transform-origin:0 0"></div> 
</div> <span>Hello World.</span>
</div>

Answer 1

已更新以解决裁剪问题

这是使用伪元素的解决方案

＆＃13;

<?xml version="1.0" encoding="utf-8" ?>
<CodeSnippets  xmlns="http://schemas.microsoft.com/VisualStudio/2005/CodeSnippet">
    <CodeSnippet Format="1.0.0">
        <Header>
            <Title>propc</Title>
            <Shortcut>propc</Shortcut>
            <Description>Code snippet for property and backing field with change notification</Description>
            <Author>Mark Feldman</Author>
            <SnippetTypes>
                <SnippetType>Expansion</SnippetType>
            </SnippetTypes>
        </Header>
        <Snippet>
            <Declarations>
                <Literal>
                    <ID>type</ID>
                    <ToolTip>Property type</ToolTip>
                    <Default>int</Default>
                </Literal>
                <Literal>
                    <ID>property</ID>
                    <ToolTip>Property name</ToolTip>
                    <Default>MyProperty</Default>
                </Literal>
            </Declarations>
            <Code Language="csharp"><![CDATA[private $type$ _$property$;
        public $type$ $property$
        {
            get { return this._$property$;}
            set { this._$property$ = value; RaisePropertyChanged(); }
        }
        $end$]]>
            </Code>
        </Snippet>
    </CodeSnippet>
</CodeSnippets>

＆＃13;

.sprite:before {
  content: ' ';
  display: inline-block;
  overflow: hidden;
  background: url(http://puu.sh/nWh8y.png) no-repeat;
  width:48px;
  height:48px;
  transform-origin:0 0;
}
.sprite:after {
  content: attr(data-text);
}
.tab-achievement:before {
  background-position: -48px -48px;
}
.tab-locker:before {
  background-position: -48px 0;
}
.img24x24:before {
  transform: scale(0.5);
}
.img36x36:before {
  transform: scale(0.75);
}

＆＃13;

使用可扩展的CSS Spritesheet

1 个答案: