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

如果一个元素及其所有子元素都是透明的（否background-color，否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