Как заставить фон использовать спрайт-изображение

Question

Как заставить фон использовать спрайт-изображение

0

У меня есть большой div, который охватывает весь экран, я использую фоновое изображение на этом div, но теперь я хочу сделать эту часть изображения спрайта, поэтому у меня меньше запросов HTTP. Проблема в том, что я не знаю, как заставить div использовать только часть спрайта, а не показывать все изображение, например:

div{
    width: 100%;
    height: 100%;
    background: rgba(52, 52, 52, .5);
    position: fixed;
    background-image: url('http://i.imgur.com/S7v0Xyn.png');
}

Пример Jsfiddle

Мне просто нужно использовать небольшую сетку, которую вы едва можете увидеть на изображении спрайта, а не весь образ, и я также хочу, чтобы сетка повторялась по всему div.

Andres Orozco 24 окт. 2013, в 08:58

Источник

0

Вы должны установить ширину, высоту и положение изображения, которое вы хотите использовать. Пример1 , Пример2
Vucko 24 окт. 2013, в 06:12
0

@Vucko Vucko Да, я знаю, но как мне это сделать в этом случае.
Andres Orozco 24 окт. 2013, в 06:15
0

Я обновил примеры в комментарии.
Vucko 24 окт. 2013, в 06:16
0

@Vucko Дело в том, что я использую ширину и высоту, чтобы установить сам размер div, мне нужно установить размер фона.
Andres Orozco 24 окт. 2013, в 06:21
0

Прочитайте это .
Vucko 24 окт. 2013, в 06:30

Показать ещё 3 комментария

Теги:

html

css

background

css-sprites

2 ответа

Ещё вопросы

Вы должны установить ширину, высоту и положение изображения, которое вы хотите использовать. Пример1 , Пример2
@Vucko Vucko Да, я знаю, но как мне это сделать в этом случае.
@Vucko Дело в том, что я использую ширину и высоту, чтобы установить сам размер div, мне нужно установить размер фона.

Overflow Stack · Answer 1 · 2013-10-24T05-31-00.000Z

Карамба избил меня, поэтому я включил JSFiddle, чтобы показать другое использование для этого.

ОБРАЗЕЦ

HTML:

<ul id="nav">
    <li><a class="facebook" href="#"></a>Facebook</li>
    <li><a class="twitter" href="#"></a>Twitter</li>
    <li><a class="browsers" href="#"></a>Browsers</li>
</ul>

CSS:

#nav {
    width: 200px;
}
#nav li {
    list-style-type: none;
    font-size: 14px;
    font-family: "Courier", sans-serif;
    padding: 10px;
}
#nav li a {
    background-image: url('http://i.imgur.com/S7v0Xyn.png');
    background-repeat: no-repeat;
    display: block;
}
#nav li a.facebook {
    background-position: 0px 0px;
    width: 30px;
    height: 30px;
}
#nav li a.twitter {
    background-position: -33px 0px;
    width: 30px;
    height: 30px;
}
#nav li a.browsers {
    background-position: 0px -40px;
    width: 65px;
    height: 17px;
}

Нет, идея в том, чтобы использовать маленькую сетку, которую вы едва можете увидеть под значками браузера, в качестве фона для div, который покрывает весь экран с шириной = 100% и высотой = 100%. Проверьте мой пример. jsfiddle.net/NMtX7

caramba · Answer 2 · 2013-10-24T03-59-00.000Z

попробуйте вот так:

вы устанавливаете изображение в положение, в котором вы не видите его с помощью значка класса
позже вы установите seccond class.icon.facebook с правильной позицией и элементами из спрайта, который вы хотите показать

http://jsfiddle.net/NMtX7/5/

 <span class="icon facebook"></span>
 <span class="icon twitter"></span>


.icon {
    background-image: url('http://i.imgur.com/S7v0Xyn.png');
    background-position:3000px 3000px;
}
.icon.facebook {
    border:2px solid green; /* you don't need this*/
    margin:20px;            /* you don't need this*/
    background-position:0px 0px;
    width:30px;
    height:30px;
    display:inline-block;

}
.icon.twitter {
     border:2px solid orange;
    background-position:-32px 0px;
    width:30px;
    height:30px;
    display:inline-block;
}

@ Андреас, ты имеешь в виду, что хочешь повторить сетку по всему экрану? если это так, вы не можете использовать спрайты. спрайты не работают с повторными imgs. все повторяющиеся imgs должны быть установлены как одиночные img!