Chỉ màu một phần của phần tử HTML

Question

Làm cách nào để tôi tô màu một phần của phần tử HTML với một cái gì đó như background-clip - chỉ sử dụng CSS.

Tôi đang tìm một cái gì đó như:

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

Tôi cũng mở cửa cho một giải pháp JavaScript, nếu cần thiết - nhưng CSS tinh khiết sẽ tốt hơn.

Answer 1

tôi muốn tạo một div nền. Cân nhắc HTML này:

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

Với CSS này:

<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> 

Để tạo ra một kết quả như thế này:

JSFiddle demo

Answer 2

Bạn có thể tô màu một phần của nền của phần tử bằng phần tử giả :before.

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

Code:

<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

Tôi không chắc chắn tôi hoàn toàn chắc chắn tôi hiểu câu hỏi của bạn, nhưng hãy xem câu hỏi này : http://jsfiddle.net/TJSdq/ và xem đó có phải là điều bạn muốn không.

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; 
} ​ 

Tuy nhiên nếu bạn muốn màu sắc chỉ là một phần của một div phi đối xứng, sau đó đặt cược tốt nhất của bạn là sử dụng divs phụ và thay vào đó là màu div. Phương pháp này được ưa thích vì nó sẽ hỗ trợ trình duyệt tốt hơn các kỹ thuật CSS3 mới hơn mà tôi không biết. Đối với ví dụ sau, hãy xem fiddle này: 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 
}