javascript - 只为 HTML 元素的一部分着色

Question

我将如何只使用类似的东西为 HTML 元素的一部分着色background-clip- 仅使用 CSS。

我看起来像：

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

如有必要，我也对 JavaScript 解决方案持开放态度——但纯 CSS 会更好。

Answer 1

我会创建一个背景 div。考虑这个 HTML：

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

使用这个 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>

要创建这样的结果：

JSFiddle 演示

Answer 2

您可以使用伪元素为元素背景的一部分着色:before。

演示：http: //jsfiddle.net/yw3wF/

代码：

<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

我不确定我是否完全理解你的问题，但看看这个小提琴：http: //jsfiddle.net/TJSdq/看看这是否是你想要的。

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

但是，如果您只想对 div 的一部分进行非对称着色，那么最好的办法是使用子 div 并为该 div 着色。首选此方法，因为它比我不知道的较新的 CSS3 技术具有更好的浏览器支持。对于后一个示例，请查看此小提琴：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
}