¿Cómo mostrar varios iconos pequeños en una imagen usando CSS?
CSS muestra varios iconos pequeños en una imagen grande, controlados principalmente por el atributo de posición de fondo.
Primero mire la imagen grande de 300*300 a continuación. Cada ícono pequeño es de 100*100. (El nombre de esta imagen es 9pic2.jpg)
Primero, establezca el tamaño del elemento donde desea colocar el ícono pequeño de fondo al tamaño real del ícono en la imagen, configúrelo con ancho y altura, y luego use background-image. Coloque la imagen de fondo, por ejemplo: .showImage{
fondo-imagen:?url(9pic2.jpg);
ancho:? 100px;
height :?100px;
}
Después de configurar esto, el pequeño ícono en la esquina superior izquierda de la imagen grande (se supone que es un 100*100 icono pequeño aquí) aparecerá.
Luego use la propiedad background-position para ajustar la posición de la imagen de fondo. Tiene dos valores que representan la distancia que se mueve la imagen de fondo a lo largo de los ejes xey. Imagina que la imagen de fondo coincide inicialmente con la esquina superior izquierda del elemento actual, pero la imagen de fondo se puede mover porque el eje x del sistema de coordenadas del navegador es positivo hacia la derecha y el eje y es positivo hacia abajo. Por lo tanto, la imagen de fondo generalmente debe moverse hacia la izquierda y hacia arriba, por lo que el valor del movimiento suele ser negativo.
Por ejemplo, para el segundo ícono pequeño de arriba, la imagen grande debe moverse 100 píxeles hacia la izquierda a lo largo de la dirección x, mientras que la dirección y permanece sin cambios. Configure el atributo de posición de fondo de la siguiente manera: #. item2{
background-position:?-100px?0;
}
Otros son iguales.
Finalmente, publiqué un ejemplo. Una vez que comprendas este atributo, lo entenderás.
El nombre de la otra imagen utilizada es 9pic1.jpg, publíquela primero:
El código es el siguiente: lt;!doctype?htmlgt;
lt;html?lang="es"gt;
lt;headgt;
lt;meta?charset="UTF-8"gt;
lt;titlegt ;Fondo imagen de corte de posición de fondolt;/titlegt;
lt;stylegt;
.showImage{
imagen de fondo:?url(9pic2 .jpg );
ancho: ?100px;
alto: ?100px
}
.showImage: desplazarse{
imagen de fondo:?url(9pic1.jpg);
}
ul{
estilo de lista:?none;
}
ul?li{
flotador:?izquierda;
margen:?20px;
}
#item1{
posición-fondo:?0?0;
}
#item2{
posición-fondo:?-100px?0;
}
#item3{
posición-fondo:?-200px?0;
}
#item4{
posición-fondo:?0?-100px;
}
#item5{
posición-fondo:?-100px?-100px;
}
#item6{
posición-fondo:?-200px?- 100px;
}
#item7{
posición-fondo:?0?-200px;
}
#item8{
posición-fondo:?-100px?-200px;
}
#item9{
fondo- posición: ?-200px?-200px;
}
lt;/stylegt;
lt;/headgt;
lt; cuerpogt;
lt;div?class="contenedor"gt;
lt;ulgt;
lt;li?id="item1"?class= "showImage "gt;lt;/ligt;
lt;li?id="item2"?class="showImage"gt;lt;/ligt;
lt;li? id= "item3"?class="showImage"gt;lt;/ligt;
lt;li?id="item4"?class="showImage"gt;lt;/ligt;
lt;li?id="item5"?class="showImage"gt;lt
;/ligt;
lt;li?id="item6"?class="showImage"gt;lt;/ligt;
lt;li?id="item7"? class="showImage"gt;lt;/ligt;
lt;li?id="item8"?class="showImage"gt;lt;/ligt;
lt; li?id="item9"?class="showImage"gt;lt;/ligt;
lt;/ulgt;
lt;/divgt;
lt;/bodygt;
lt;/htmlgt;
Este ejemplo divide la imagen, la organiza horizontalmente en la página y utiliza: pseudoclase de desplazamiento para realizar el uso del mouse movimiento Una vez que llegas a la cima, cambia de blanco y negro a color.