仅为HTML元素的一部分着色

时间:2012-12-28 17:49:30

标签: javascript css

我如何仅使用CSS background-clip来为HTML元素的一部分着色。

我看起来像是:

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

如果有必要,我也会接受JavaScript解决方案 - 但纯CSS会更好。

3 个答案:

答案 0 :(得分:4)

我创建了一个背景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>

要创建这样的结果:

demo

JSFiddle demo

答案 1 :(得分: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;
}

答案 2 :(得分:0)

我不确定我是否完全确定我理解你的问题,但请查看这个小提琴: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
}