Проблема с созданием CSS Sprite в моем проекте? - PullRequest
Новая
       3

Проблема с созданием CSS Sprite в моем проекте?

0 голосов
/ 10 января 2020

У меня проблема с созданием CSS Sprite. Это первый раз, когда я использую спрайт, поэтому я не профессионал с ним.

Это HTML код: 

<div class="dfeature-box">
<div class="icon"><img class="multi" src="images/sprite.jpg"></div>
<div class="title">Title</div>
<div class="details">description.</div>
</div>

И это CSS код: 

text-align: center;
margin-bottom: 30px;
display: inline-block;
width: 100%;
max-width: 272px;
}

.dfeature-box .icon {
display: flex;
display: -webkit-flex;
justify-content: center;
align-items: center;
width: 106px;
height: 106px;
background-color: #ffffff;
border-radius: 16px;
text-align: center;
margin-bottom: 35px;
margin-left: auto;
margin-right: auto;
}

.dfeature-box .icon .multi{
background-position:126px 9px; 
height:47px; 
width: 64px;

И это изображение, которое я хочу использовать (3 иконки на одном изображении) - в своих кодах я использовал последнее изображение (два человека)

enter image description here

И вот результат (как вы видите все 3 изображения, соединенные вместе):

enter image description here

У меня тоже есть важный вопрос: как я могу использовать изображение в CSS вместо использования в HTML (класс = значок)? как вы видите, «img» используется в «class = icon».

== >> Первое обновление:

Пожалуйста, проверьте эти новые коды на основе вашего предложения: Вот результат: введите описание изображения здесь

CSS: 

.sprite-bg{
background: url("images/sprite.jpg");
}

.bg-1{
width:62px;
height:62px;
background-position: 0px 0px;
}

HTML: 

<div class="dfeature-box">
<div class="icon"><div class="sprite-bg bg-1"></div></div>
<div class="title">Title</div>
<div class="details">Description</div>
</div>

Посмотрите на это HTML код: Вы уверены в части, отмеченной красным? Что я должен положить туда? введите описание изображения здесь

Также, пожалуйста, посмотрите мои коды в моем первом посте. Я хочу использовать спрайт в своих кодах.

== >> Второе обновление: 

.dfeature-box {
text-align: center;
margin-bottom: 30px;
display: inline-block;
width: 100%;
max-width: 272px;
}

.dfeature-box .icon {
display: flex;
display: -webkit-flex;
justify-content: center;
align-items: center;
width: 106px;
height: 106px;

background-color: #ffffff;
border-radius: 16px;
text-align: center;
margin-bottom: 35px;
margin-left: auto;
margin-right: auto;
-webkit-transform-origin: center center;
-moz-transform-origin: center center;
-ms-transform-origin: center center;
transform-origin: center center;
-webkit-transform: scale(1);
-moz-transform: scale(1);
-ms-transform: scale(1);
transform: scale(1);
-webkit-box-shadow: 0 8px 12px rgba(31, 27, 90, 0.08);
box-shadow: 0 8px 12px rgba(31, 27, 90, 0.08);
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
}

.sprite-bg{

background: url("https://i.imgur.com/VO1dBBA.jpg");

}
.bg-1{
    width:62px;
    height:62px;
    background-position: 0px 61px;
}
.bg-2{
    width: 64px;
    height: 62px;
    background-position: 62px 61px;
}
.bg-3{
    width: 64px;
    height: 62px;
    background-position: 127px;
}

.dfeature-box .icon i {
    font-size: 50px;
    background: -webkit-linear-gradient(to bottom, #45b35e, #6ad56a);
    background: linear-gradient(to bottom, #45b35e, #6ad56a);
    color: transparent;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
}
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Hustbee</title>

    <link rel="stylesheet" type="text/css" href="css/style.css">

</head>
	<body>
			<div class="dfeature-box">
                    <div class="icon"><div class="sprite-bg bg-1"></div></div>
                    <div class="title">TITLE</div>
                    <div class="details">long description.</div>
                </div>


                <div class="dfeature-box">
                    <div class="icon"><div class="sprite-bg bg-2"></div></div>
                    <div class="title">TITLE</div>
                    <div class="details">long description.</div>
                </div>

                <div class="dfeature-box">
                    <div class="icon"><div class="sprite-bg bg-3"></div></div>
                    <div class="title">TITLE</div>
                    <div class="details">long description.</div>
                </div>

	</body>
</html>

Ответы [ 2 ]

2 голосов
/ 10 января 2020

Проверьте приведенный ниже пример:

Есть несколько вещей, которые необходимо проверить:

  1. Изображение спрайта всегда вызывается backgound:url(path to image)
  2. создать 3 класса для икон.
  3. вызовите различные позиции изображения. 

.sprite-bg{
 
  background: url(https://cdn.tutsplus.com/webdesign/uploads/legacy/tuts/373_sprites/angry_birds.png);

}
.bg-1{
 width:110px;
  height:110px;
  background-position: 0px 0px;
}
.bg-2{
 width: 58px;
    height: 60px;
    background-position: 194px 89px;
    //border: 2px solid red;
    float:right;
}
<div class="sprite-bg bg-1"></div>
<div class="sprite-bg bg-2"></div>
0 голосов
/ 10 января 2020

Вы должны разделить свое изображение на 3 отдельных файла. если вы хотите использовать их по отдельности, поскольку вы не можете разделить изображения с помощью html / css

У меня тоже есть важный вопрос: как я могу использовать изображение в CSS вместо того, чтобы использовать его в HTML (класс = значок)? как вы видите, «img» используется внутри «class = icon».

Да, вы можете добавить свойство background в ваш класс и загрузить изображение, используя url("...")

background: url("img/sprite.jpg");
...