7

background-clipHTML要素の一部だけをCSSのみを使用して-のようなもので着色するにはどうすればよいですか？

私は次のように見えます：

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

必要に応じて、JavaScriptソリューションも利用できますが、純粋なCSSの方が適しています。

4

3 に答える 3

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>

このような結果を作成するには：

デモ

JSFiddleデモ

于 2012-12-28T18:00:36.747 に答える
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;
}
于 2012-12-28T17:58:23.950 に答える
1

私はあなたの質問を完全に理解しているとは思いませんが、このフィドルをチェックしてください：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
}
于 2012-12-28T18:09:04.343 に答える