CSS Sprites – using just one piece of an image as a background for part of an element

综合技术 2018-01-01

I use the CSS Sprite Technique with a background image that looks something like this:

The CSS code for the icons:

div.icon {
    background-color: transparent;
    background-image: url("/images/icons.png");
    background-position: 0 0;
    background-repeat: no-repeat;
    display: inline-block;
    height: auto;
    vertical-align: text-top;
    width: auto;
}
div.icon:empty {
    width:16px;
    height:16px;
}
div.icon:not(:empty) {
    padding-left:20px;
}
div.icon.attenuation {
    background-position: 0 0;
}

My icons can be used like this:

I want to put some text inside my icons like:

There is a warning on this page

But the problem is that the background image covers the entire text area:

The question is: how can I use only part of an image as a background image for part of my element?

Notes:

  • setting width to 16px for div.icon doesn't help.

Problem courtesy of: AlexStack

Solution

You have two ways:

1)Your markup must be like this:

There is a warning on this page
.icon {width:10px(for ex.)}

2)You must change the image. Icons in the image must be below the another

Solution courtesy of: jumancy

Discussion

Sorry, my previous answer was not well though out.

Edit: If you have a 16px padding, you should set the width to 0, not 16px. And I've got troubles getting the :not(:empty) bit to work on all browsers; better get rid of it. So the CSS becomes:

.icon {
  ...
  width:0; height:16px; padding-left:16px;
}
.icon:empty {
  width:16px; padding-left:0;
}

jsFiddle

Discussion courtesy of: Mr Lister

set width: 16px; height: 16px; overflow: hidden; text-indent: -9999em; and remove padding

Discussion courtesy of: simoncereska

Remember, where ever possible, you shouldn't change your markup just to achieve a design. It is possible using your markup.

div.icon:before {
    content: "";
    background-color: transparent;
    background-image: url("/images/icons.png");
    display: inline-block;
    height: 16px;
    vertical-align: text-top;
    width: 16px;
}

div.icon:not(:empty):before {
    margin-right: 4px;
}

div.icon.attenuation {
    background-position: 0 0;
}

Discussion courtesy of: Alex Chamberlain

This recipe can be found in it's original form on Stack Over Flow .

CSS3 Recipes

责编内容by:CSS3 Recipes (源链)。感谢您的支持!

您可能感兴趣的

The Simplest Way to Add Google Maps to Your Site When building a website, you often need to include a map to give people a better sense of directi...
CSS – Local File System Paths On Windows When working with Windows you probably have noticed that local file paths use the backslash as th...
15个国外最流行的CSS框架 摘要:CSS框架通常指的是一些CSS文件的集合,这些文件包括网页的基本布局、表单样式、网格或简单结构、以及样式重置。本文将介绍15个国外最流行的CSS框架,希望对您有所帮助。 CSS框架通...
CSS items with border radius and triangle side Is it possible in css (without images) make items with border radius and triangle side? Prob...
Using prettier and rubocop in Ruby on Rails applic... Recently we started using prettier and rubocop to automatically format our code on git com...