¿Por qué no puedo usar background-clip?

Question

Mi intento de utilizar background-clip: content-box está fallando. Toda la caja tiene un fondo, que incluye el área de relleno, no solo el área de contenido.

http://jsfiddle.net/alanhogan/7YjCV/6/

¿Qué estoy haciendo mal?

Answer 1

Esto es un gotcha común con propiedades abreviadas en CSS.

Debido background-clip is one of the properties that's set by the background shorthand property, su estilo background está estableciendo implícitamente background-clip-border-box (su valor inicial), anulando su estilo explícita background-clip:

background-clip: content-box; 
background: #ddd none /* border-box */; 

Si mueve su declaración background-clip debajo background, funcionará como se esperaba :

background: #ddd none; 
background-clip: content-box; 

jsFiddle demo

Answer 2

La propiedad CSS background es una forma de una línea para definir todos los propiedades de fondo, incluyendo background-clip. Por lo tanto, al especificar background: #ddd, se desactiva la configuración anterior de background-clip. Si, en cambio, reemplaza esa línea con background-color: #ddd, debería funcionar de la manera que desee.

Here's la pequeña modificación de su jsfiddle.