0

Web ページの下部に、このような鋸歯状の効果を追加しようとしています。

http://d.pr/i/GpOb

次の結果が得られる Internet Explorer を除いて、すべてのブラウザーで適切に機能するコードを見つけることができました。

http://d.pr/i/VdLe

残念ながら、Internet Explorer を回避することはできません。これを修正する方法については、私の知識の限界に達しています。

これは、CSS ファイルで使用しているコードです。

            #footer {
            position:relative;
            width: 100%;
            height: 280px;
            margin-top:5px;
            background-color: #ab1919 ;
            z-index:1;
            border-bottom: 10px ridge #ab1919 ;
            }


            #footer:before {

            content: " ";
            display:block;
            position: relative;
            top:0px;left:0px;
            width:100%;
            height:36px;
                background: linear-gradient(#fff 0%, transparent 0%), linear-gradient(135deg, #ab1919 33.33%, transparent 33.33%) 0 0%, #ab1919 linear-gradient(45deg, #ab1919 33.33%, #fff 33.33%) 0 0%;
                background: -webkit-linear-gradient(#fff 0%, transparent 0%), -webkit-linear-gradient(135deg, #ab1919 33.33%, transparent 33.33%) 0 0%, #ab1919 -webkit-linear-gradient(45deg, #ab1919 33.33%, #fff 33.33%) 0 0%;
                background: -o-linear-gradient(#fff 0%, transparent 0%), -o-linear-gradient(135deg, #ab1919 33.33%, transparent 33.33%) 0 0%, #ab1919 -o-linear-gradient(45deg, #ab1919 33.33%, #fff.33%) 0 0%;
            background: -moz-linear-gradient(#fff 0%, transparent 0%), -moz-linear-gradient(135deg, #ab1919 33.33%, transparent 33.33%) 0 0%, #ab1919 -moz-linear-gradient(45deg, #ab1919 33.33%, #fff   33.33%) 0 0%;
                background-repeat: repeat-x;
                background-size: 0px 100%, 9px 27px, 9px 27px;
            }

誰かがこの問題を手伝ってくれるなら、私は永遠に感謝します.

ありがとう

4

1 に答える 1

1

画像DEMO http://jsfiddle.net/kevinPHPkevin/YyyP9/でそれを行うことができます

body, html {
    height:100%; background:url(http://www.hscripts.com/freeimages/icons/symbols/shapes/triangle/triangle-image8.gif);
    background-repeat:repeat-x;
    background-position:bottom;
}
于 2013-04-11T19:59:02.540 に答える