0

私の質問は少しばかげているように見えますが、この写真の下に示されているようなものを作ることができます
か?私ができることを100%認識しています: 

<div id="TheContenaire">
<div><div> <!--this is where i can put a background image or a gradient style using css-->

<div></div> <!--the same thing with this div-->
</div>

しかし、これを 1 つの div (TheContainer) だけで実行し、CSS スプライトと 1 つの画像だけを使用して 2 つの背景を適用できますか? それを上に置き、次に下に置き、回転させる
か、その他の操作を行います

4

2 に答える 2

2

使用する場合linear-gradient、階層化された要素は必要ありません: http://jsfiddle.net/e8gyb/

別の要素を使用せずに何かを重ねるには:after

div {
    position: relative;
}
div:after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
}

グラデーションに関する良い記事: http://css-tricks.com/css3-gradients/
その他のデモ: http://css-tricks.com/examples/CSS3Gradient/

:after編集:これは IE10+ で動作します。

于 2013-08-02T16:09:40.423 に答える
0

HTML

<div></div>

インセット シャドウ オプション:

div {
    height: 500px;
    width: 500px;
    box-shadow: inset 0 4em 7em -4em #000000,
                inset 0 -4em 7em -4em black;

}

デモ

またはbackground-imageとgradient:

div:before {
    content: "";
    position: absolute;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(#000), to(transparent));
    top: 0%;
    min-width: 100%;
    min-height: 3em;
}

div:after {
    content: "";
    position: absolute;
    background-image: -webkit-gradient(linear, 0 0, 0 100%, from(transparent), to(#000));
    top: 100%;
    min-width: 100%;
    min-height: 3em;
}

デモ

明らかに、実装に必要なベンダー プレフィックスを使用する必要があります。

于 2013-08-02T16:13:18.793 に答える