Colore solo una parte di un elemento HTML

Question

In che modo è possibile colorare solo una parte di un elemento HTML con qualcosa come background-clip - utilizzando solo CSS.

Sto cercando qualcosa di simile:

div { 
    background-image: url('mi_image'); 
    ***: 50% 30em; /* Background only covering 50% height and 30em width */ 
} 

Sono aperto ad una soluzione JavaScript anche, se necessario - ma puro CSS sarebbe meglio.

Answer 1

mi piacerebbe creare un div sfondo. Considerate questo HTML:

<div id="outer-container"> 
    <div id="container-background"></div> 
    <div id="container"> 
     <p> 
      Here's some of my interesting text   
     </p>  
    </div> 
</div>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​ 

Con questo CSS:

<style type="text/css"> 
    #outer-container { 
     height: 300px; 
     width: 300px; 
     border: 1px solid black; 
     position: relative; 
     overflow: hidden; 
    } 
    #container-background { 
     position: absolute; 
     top: 0px; 
     left: 0px; 
     background-color: #FF0000; /* Use background-image or whatever suits you here */ 
     width: 50%; /* Your width */ 
     height: 200px; /* Your height */ 
     z-index: -1; 
    }​ 
</style> 

Per creare un risultato come questo:

JSFiddle demo

Answer 2

È possibile colorare parte dello sfondo dell'elemento utilizzando lo pseudo :before elemento.

Demo: http://jsfiddle.net/yw3wF/

Codice:

<div class="foo">This is the element. This is the element. This is the element. This is the element. This is the element. This is the element. This is the element. This is the element. This is the element. This is the element. </div> 

.foo { 
    width: 200px; 
    height: 200px; 
    position: relative; 
    border: 1px solid green; 
    margin: 10px; 
    float: left; 
} 
.foo:before { 
    content: ""; 
    position: absolute; 
    top: 0; 
    left: 0; 
    height: 100%; 
    width: 50%; 
    background-color: yellow; 
    z-index: -1; 
} 

Answer 3

io non sono sicuro che completamente sicuro che capisco la tua domanda, ma dai un'occhiata a questo violino : http://jsfiddle.net/TJSdq/ e vedere se è quello che vuoi.

HTML

<div> 
    This is my div and I love my divs. I take good care of my divs; they are my babies. 
</div>​ 

CSS

div{ 
    width:200px; 
    height:200px; 
    padding:20px; 
    background-color:yellow; 
    background-clip:content-box; 
    -webkit-background-clip:content-box; 
    border:2px solid black; 
} ​ 

Tuttavia, se si desidera colorare solo una parte di un div non simmetrico, allora la cosa migliore è quella di utilizzare div sub e colore che div invece. Questo metodo è preferito perché avrà un supporto browser migliore rispetto alle più recenti tecniche CSS3 di cui non sono a conoscenza. Per l'ultimo esempio, dai un'occhiata a questo violino: http://jsfiddle.net/aD9mF/.

HTML

<div> 
    This is my first div. 
    <div> 
     This is my sub-div.   
    </div> 
<div>​ 

CSS

div{ 
    width: 300px; 
    height: 300px; 
    border: 3px solid black; 
} 
div div{ 
    background-color:yellow; 
    width: 30px; 
    height: 100%; 
    float:left; 
    border:none 
}