posición de fondo para el color de fondo

Im capaz de dar la posición de inicio de una imagen de fondo. Pero si doy posiciones para fondo de relleno sólido no funciona. Aquí está el violín js para eso.posición de fondo para el color de fondo

http://jsfiddle.net/yPVJE/

Así podemos ajustar la posición de inicio y el tamaño de un sólido fondos de relleno?

Gracias!

Fuente

2011-12-19 rajkamal

estoy tratando de obtener este efecto http://jsfiddle.net/H48ua/, sin el div interno ".bg" transfiriendo el ".bg" al div ".cover" – rajkamal

No se puede compensar un color de fondo. Solo las imágenes de fondo tienen una posición.

Fuente

2011-12-19 07:56:51 Scott

Esta es una manera de compensar un color de fondo sólido, utilizando un gradiente lineal con un color transparente para el primer número x de píxeles:

.offset { 
    background-image: linear-gradient(left, transparent 300px,rgba(39,39,39,.5) 300px, rgba(39,39,39,.5) 100%); 
    width: 100%; 
    height: 500px; 
}

Así es a demo en jsFiddle.

Fuente

2012-07-26 16:15:33 StuR

Fui a la demostración en JSFiddle y vi nada como resultado, incluso si presiono ejecutar. Esperaba que el color de fondo de clr div se compensara un poco, pero no se mostró nada en absoluto. ¿Hay un error en el script? Para lo que sea, intenté agregar el CSS de la respuesta de Ash y también vi nada. Incluso intenté agregar eso al original. –

@SarahWeinberger - Pruebe el enlace JSFiddle nuevamente, he agregado prefijos de navegador al CSS. – StuR

Gracias, el código actualizado funcionó. Nota para los demás: la vista de diseño interno de Visual Studio 2013 no muestra el gradiente/color. Debe ejecutar el ejemplo en un navegador real para ver el resultado. Caí en esta trampa e intenté descubrir la diferencia entre Fiddler y mi navegador (VS2013 Design View) y me di cuenta de que VS no es un navegador verdadero y tiene limitaciones. –

Me gustaría tener un enfoque similar al StuR, pero utilizando la posición de fondo en lugar de puntos de gradiente. Luego puede establecer su posición de fondo como lo haría normalmente.

div { 
    background:linear-gradient(left, #000, #000) no-repeat 50px 50px; 
}

Fuente

2012-10-24 19:17:08 Ash

Tenga en cuenta que esto no funciona con porcentajes como 50% – jsheffers

Nota: IE9 no y opera mini no admiten gradiente lineal – Flion

Esto parece más perfecto para píxeles.Con solo un gradiente lineal obtuve algunas líneas "borrosas" en algunos navegadores cuando el elemento era demasiado grande. – hesselbom

Sí, con gradiente lineal funciona:

div { background-image: linear-gradient(transparent 10px, grey 10px); }

Fuente

2014-05-26 13:43:25 user3223452

Cuidado con la alineación incorrecta cuando se utilizan linear-gradient puntos. Aquí hay un mejor enfoque:

background: linear-gradient(#6699cc, #6699cc); 
background-size: auto 4em; 
background-repeat: no-repeat;

Utiliza linear-gradientsimplemente para generar color sólido, que luego se cambia de tamaño para reflejar el tamaño del área cubierta. También background-position podrían utilizarse según sea necesario

Fuente

2018-01-03 11:53:53 thodnev

Otra manera de lograr esto sería añadir un pseudo-elemento al elemento div este modo:

div { 
 
    ::before { 
 
    border-top: 10px solid #0066a4; 
 
    content:""; 
 
    margin: 0 auto; /* this centers the line to the full width specified */ 
 
    position: absolute; /* positioning must be absolute here, and relative positioning must be applied to the parent */ 
 
    top: 12px; left: 0; right: 0; bottom: 0; 
 
    z-index: -1; 
 
    } 
 
}

Ver este CodePen por Eric Rasch para un ejemplo de trabajo: https://codepen.io/ericrasch/pen/Irlpm

Fuente

2018-01-23 02:44:12

posición de fondo para el color de fondo

Respuesta

Cuestiones relacionadas