img-replace (_base.scscs)

Tipo: Mixin

Versión: 2.x.x

Reemplaza texto visual por una imagen de fondo, manteniendo el contenido textual en el marcado.

Aplica utilidades de fondo y delega la base del contenedor al mixin replace-base, por lo que también puede personalizar tamaño, display, ocultamiento de texto, posición y z-index.

Interface

@mixin img-replace($image, $iw: auto, $ih: auto, $display: block);

Sintaxis alternativa (map)

@include img-replace((
    image: "",
    width: auto,
    height: auto,
    display: block,
    repeat: no-repeat,
    position: center,
    color: transparent,
    size: cover,
    base: (
        width: auto,
        height: auto,
        display: block,
        ht: true
    )
));

Valores por defecto: iw auto, ih auto, display block, repeat no-repeat, position center, color transparent y size cover. La clave base se fusiona con width, height y display ya resueltos por el mixin.

Parámetros secuenciales

Parámetro	Tipo	Default	Descripción
image	String	Requerido	Define la ruta de la imagen usada en background-image.
iw	Medida	auto	Define la propiedad width.
ih	Medida	auto	Define la propiedad height.
display	String	block	Define el valor de display del elemento.

Sintaxis map

Clave	Tipo	Default	Descripción
image \| url \| i \| u	String	""	Ruta de la imagen de fondo. Prioridad de lectura: image, luego url, luego i, luego u.
width \| w	Medida	auto	Define la propiedad width.
height \| h	Medida	auto	Define la propiedad height.
display \| d	String	block	Valor de display aplicado al elemento.
repeat \| r	String	no-repeat	Valor de background-repeat.
position \| p	String	center	Valor de background-position.
color \| c	Color	transparent	Valor de background-color.
size \| s	String	cover	Valor de background-size.
base	Map	(width: auto, height: auto, display: block, ht: true)	Permite sobrescribir la configuración enviada al mixin replace-base.

Ejemplo

Gato

Perro

<h2 class="img_replace_example">Gato</h2>
<h2 class="img_replace_parameters">Perro</h2>