Question

我正在尝试使用类似图像的CSS： http://i331.photobucket.com/albums/l441/designdigitall/h.png

我需要在下方播放幻灯片，但它仅适用于图片，幻灯片或iframe中的背景，以便始终放在错误的位置。

http://i331.photobucket.com/albums/l441/designdigitall/ask03.jpg

请帮帮我。

代码

谢谢

<style type="text/css">
    body {
    margin: 0;
    }
    #slidetudo {
    width: 1002px;
    margin: 0 auto;
    }


    .inversePair22 {
        border: 0px solid black;
        display: inline-block;    
        position: relative;    
        height: 248px;
        text-align: center;
        line-height: 100px;
        vertical-align: middle;
        z-index: 5;
    }
    .inversePair {
        border: 0px solid black;
        display: inline-block;    
        position: relative;    
        height: 248px;
        text-align: center;
        line-height: 100px;
        vertical-align: middle;
        background: #CC0003; /* para browsers sem suporte a CSS 3 */

        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#CC0003', endColorstr='#26070D'); /* IE */

        -ms-filter: "progid:DXImageTransform.Microsoft.gradient(GradientType=0,startColorstr='#CC0003', endColorstr='#26070D')"; /* IE8 */

        background: -webkit-gradient(linear, left top, left bottom, from(#CC0003), to(#26070D)); /* webkit browsers */
        background: -moz-linear-gradient(top,  #CC0003,  #26070D); /* Firefox 3.6+ */

    }

    #a {
        width: 547px;
        border-radius: 200px;
        z-index: 1;
    }

    #a:before {
        content:' ';
        left: 0px;
        top: 0px;
        position: absolute;
        z-index: 1;
        width: 620px; /* 5px gap */
        height: 248px;
        border-top-right-radius: 200px;
        border-bottom-right-radius: 200px;
        background-color: white;
        background-image:url(carros/fotos2/g201403141317532273cdddc2e.jpg);
    } 

    #b {
        width: 510px;
        z-index: 0;
        padding-left: 0px;
        margin-left: -60px;
        overflow: hidden; 

        }

    #b:before {
        left: -60px;
        top: -0px;
        position: absolute;
        z-index: 3;
        width: 114px; /* 5px gap, 1px border */
        height: 114px;
        border-radius: 57px;
    } 

    #imagemzin img {
        width: 600px;
        height: 248px;
        z-index: 2;
        position: absolute;
    } 

    </style>


<div id="slidetudo">
    <div id="a" class="inversePair22">

        <div id="imagemzin">
            <!----slide-or-iframeCodeHere--but-not-work------>
            <img src="http://i331.photobucket.com/albums/l441/designdigitall/slideteste.jpg" border="0" />
        </div>

</div>

<div id="b" class="inversePair">test</div>
</div>

Answer 1

您可以更轻松地为图像指定边框半径（或幻灯片容器div的边框半径），而不是制作透明图像以显示幻灯片。 http://jsfiddle.net/B9sLT/3/

    border-top-left-radius: 40px;
-moz-border-radius-topleft: 40px;
-webkit-border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
-moz-border-radius-bottom-left: 40px;
-webkit-border-bottom-left-radius: 40px;

*更新了小提示，向您展示它在渐变背景上的外观。您链接的示例图像是两个分层图像，大多数人创建bc更容易，它不使用尽可能多的CSS。

CSS框逆向圆和幻灯片

1 个答案: