css - 背景を切り取り、下のレイヤーを露出させます

Question

下のレイヤーを公開するために div の背景を切り取る方法はありますか?, 次のように:

ここに画像の説明を入力

これに：

ここに画像の説明を入力

最先端のCSSルールは大歓迎です！

アップデート

わかりました、サンプルコードを作成しました: http://jsfiddle.net/coma/9ae7g/1/

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <title>Menu</title>
        <style type="text/css">
            @charset 'UTF-8';

            body {
                padding: 0;
                margin: 0;
                font-family: "Lucida Grande", "Lucida Sans Unicode", Tahoma, Verdana, Arial, sans-serif;
                font-size: 12px;
                background: #fff url("http://colourlovers.com.s3.amazonaws.com/images/patterns/1762/1762793.png?1314797062");
            }

            a {
                text-decoration: none;
            }

            #menu {
                position: fixed;
                top: 0;
                left: 0;
                bottom: 0;
                width: 250px;
            }

            body.wide>#menu {
                width: 0;
            }

            #menu * {
                line-height: 1em;
            }

            #menu:after {
                content: '';
                position: absolute;
                top: 0;
                right: 0;
                width: 5px;
                height: 100%;
                border-right: 1px solid #666;
                pointer-events: none;
                background: -moz-linear-gradient(left,  rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%);
                background: -webkit-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 100%);
                background: -o-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 100%);
                background: -ms-linear-gradient(left,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 100%);
                background: linear-gradient(to right,  rgba(0,0,0,0) 0%,rgba(0,0,0,0.25) 100%);
            }

            #menu ul, #menu li {
                padding: 0;
                margin: 0;
                list-style: none;
                background-color: #fafafb;
            }

            #menu li {
                position: relative;
            }

            #menu>a {
                position: absolute;
                left: 100%;
                top: 50%;
                z-index: 1;
                display: block;
                width: 10px;
                height: 20px;
                margin: -10px 0 0 0;
                text-indent: -100em;
                overflow: hidden;
                border-radius: 0 2px 2px 0;
                background-color: #666;
                transition: background-color .3s ease-out;
                -moz-transition: background-color .3s ease-out;
                -webkit-transition: background-color .3s ease-out;
                -o-transition: background-color .3s ease-out;
                -ms-transition: background-color .3s ease-out;
            }

            #menu>a:before {
                position: absolute;
                top: 5px;
                right: 4px;
                display: block;
                content: '';
                border-width: 5px 6px 5px 0;
                border-style: solid;
                border-color: transparent #fff transparent transparent;
            }

            body.wide>#menu>a:before {
                right: 2px;
                border-width: 5px 0 5px 6px;
                border-color: transparent transparent transparent #fff;
            }

            #menu>ul {
                height: 100%;
                background-color: #888;
                overflow: hidden;
            }

            #menu>ul span, #menu>ul a {
                display: block;
                padding: .4em;
                color: #666;
                font-weight: bold;
                border-bottom: 1px solid #999;
            }

            #menu>ul a {
                border-top: 1px solid #fff;
                border-bottom: 1px solid #e9ecee;
            }

            #menu>ul>li>span {
                font-size: 1.25em;
                font-weight: bold;
                color: #666;
                text-shadow: 0 1px 1px #fff;
                background-color: #eee;
                background-image: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
                background-image: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
                background-image: -o-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
                background-image: -ms-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
                background-image: linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0.2) 100%);
                cursor: pointer;
                transition: background-color .4s;
                -moz-transition: background-color .4s;
                -webkit-transition: background-color .4s;
                -o-transition: background-color .4s;
                -ms-transition: background-color .4s;
            }

            #menu>ul>li>span:hover {
                background-color: #fff;
            }

            #menu>ul>li>ul {
                display: none;
            }

            #menu>ul>li.opened>ul, #menu>ul>li.current_ancestor>ul {
                display: block;
            }

            #menu>ul>li>ul>li>a {
                font-size: 1.2em;
                color: #4183c4;
                transition: background-color .4s;
                -moz-transition: background-color .4s;
                -webkit-transition: background-color .4s;
                -o-transition: background-color .4s;
                -ms-transition: background-color .4s;
            }

            #menu>ul>li>ul>li.current>a, #menu>ul>li>ul>li.current>a:hover {
                color: #fff;
                background-color: #39f;
                border-color: #39f;
            }

            #menu>ul>li>ul>li.current:after {
                content: '';
                position: absolute;
                right: -1px;
                top: 50%;
                margin: -9px 0 0 0;
                display: block;
                border-width: 10px 10px 10px 0;
                border-style: solid;
                border-color: transparent #fff transparent transparent;
                z-index: 1;
            }

            #menu>ul>li>ul>li>a:hover {
                background: #fff;
            }

            #menu>ul>li>ul>li:last-child {
                border-bottom: 1px solid #aaa;
            }

            #menu>ul>li>ul>li[data-count]:after {
                position: absolute;
                top: 50%;
                right: 14px;
                display: block;
                content: attr(data-count);
                padding: .26em .5em;
                background-color: #fff;
                border-radius: 8px;
                font-size: 12px;
                margin: -9px 0 0 0;
                color: #777;
                border-top: 1px solid #ccc;
            }

            #section {
                height: 2000px;
            }
        </style>
    </head>
    <body>      
        <div id="menu">
            <a title="cerrar o abrir el menú" href="#">toggle</a>
            <ul>
                <li class="first opened">
                    <span>Usuario</span>
                    <ul class="menu_level_1">
                        <li class="first">
                            <a href="/logout">Logout</a>
                        </li>
                        <li class="current">
                            <a href="/">Home</a>
                        </li>
                        <li>
                            <a href="/user/">Usuarios</a>
                        </li>
                        <li class="last">
                            <a href="/discount/">Descuentos</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <span>Artistas</span>
                    <ul class="menu_level_1">
                        <li class="first">
                            <a href="/artist/">Artistas</a>
                        </li>
                        <li class="last">
                            <a href="/artists/top10">Top 10 (3)</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <span>Obras</span>
                    <ul class="menu_level_1">
                        <li class="first">
                            <a href="/artwork/">Obras</a>
                        </li>
                        <li>
                            <a href="/artworks/destacadas">Destacadas (4)</a>
                        </li>
                        <li class="last">
                            <a href="/artworks/ofertas">Ofertas (3)</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <span>Pedidos</span>
                    <ul class="menu_level_1">
                        <li class="first last">
                            <a href="/order/">Pedidos</a>
                        </li>
                    </ul>
                </li>
                <li>
                    <span>Blog</span>
                    <ul class="menu_level_1">
                        <li class="first">
                            <a href="/article/">Artículos</a>
                        </li>
                        <li class="last">
                            <a href="/category/">Categorías</a>
                        </li>
                    </ul>
                </li>
                <li class="last">
                    <span>Newsletter</span>
                    <ul class="menu_level_1">
                        <li class="first last">
                            <a href="/newsletter/">Emails</a>
                        </li>
                    </ul>
                </li>
            </ul>
        </div>
        <div id="section"></div>
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">
            $(function() {

                var style = {
                    opened: 'opened',
                    wide: 'wide',
                    currentAncestor: 'current_ancestor'
                };

                var menu = $('#menu');
                var items = $('#menu>ul>li');
                var body = $('body');

                items.filter('.' + style.currentAncestor)
                .removeClass(style.currentAncestor)
                .first()
                .addClass(style.opened);

                items.children('span').click(function(event) {

                    event.preventDefault();

                    var group = $(this).parent();

                    if(!group.hasClass(style.opened)) {

                        items.filter('.' + style.opened).removeClass(style.opened);
                        group.addClass(style.opened);

                    }


                });

                menu.children('a').click(function(event) {

                    event.preventDefault();

                    body.toggleClass(style.wide);

                });

            });
        </script>
    </body>
</html>

小鳥のような背景と高さ 2000px の #section は、コンテンツを移動してテストするためのものです。

みんなありがとう！

score 0 · Accepted Answer

要素とそのすべての子が透明である場合（no background-color、no background-image）、要素は透明になります。

あなたが求めていることを達成するために、これが私がすることです：

その要素のグループのコンテナでの背景のスタイル設定は避けてください。
柔軟性を持たせるためにクリップする必要がある場合でも、単一の画像を介してこれらの個々のナビゲーション要素のすべての背景スタイルを設定します。
アクティブなナビゲーション要素の場合、背景画像を必要な透明なインデントを持つ画像に交換します。

コードから分岐したこのJSFiddleを参照してください：http：//jsfiddle.net/2XSd5/。これは、私が説明したアプローチを示しています。すべての背景を透明にし、カットアウトに背景画像を使用します。これが私が変更したコードです：

#menu:after { background: none; }

#menu > ul > li > ul > li.current:after { content: none; }

#menu ul, #menu li { background-color: transparent; }

#menu > ul { background-color: transparent; }

#menu > ul > li > ul > li > a, #menu > ul > li > ul > li > a {
    background-color: white;
    }

#menu > ul > li > ul > li.current > a, #menu > ul > li > ul > li.current > a:hover {
    background: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAASwAAAAyCAYAAADm1uYqAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAV5JREFUeNrs21FKw0AUQNEZcQluR91EVXSFQnUN1f3oEjROSwQrcYyl4HvhHHjQhHzl4yZtZ+rQFIAETtwCQLAABAsQLADBAhAsQLAABAtAsADBAhAsAMECFh+sYRyAFMEqogVEd9qmjp+r2wEE9DIVLICIsbr6GiyAyLF6+jzhX0IgRawEC0gTK8ECIsbqeipWggVE8tqLlWABkWJ10+a5d5FgARFidTvGqrvzRrCA/3bXZtPm/bcLrcNavu3Tqv5wfMh2LAuNOba3MnOLoDes3CGaM6VzLExEcN/mfM4DVLDyxukvb0K17O8ZnTOlcx6O6azNeoyWYC1APWDKRGQEh8jRemxzIVjAIqIlWECaaAkWEDVal4IFZInWw/do1aFxb4CgtpuhV4IFZIrWjpXuQIavhzt+wwLSECxAsAAECxAsAMECECxAsAAEC0CwAMECECwAwQIECyCEDwEGAGnvSNs6OT13AAAAAElFTkSuQmCC) right center no-repeat;
    color: grey;
    }

score 0 · Accepted Answer

0

右側のメニューに Z-index を追加すると、機能します

于 2012-11-10T06:59:21.087 に答える

css - 背景を切り取り、下のレイヤーを露出させます

2 に答える 2

Related

Reference