2

ねえ、CSSで複数色の背景を作成するのに苦労しています。試してみgradientましたが、欲しくない色合いになります。CSSでこれを作成したい：

CSSで作成したいものの例

私が使用したときに得た色合いを取得せずにこれを作成する方法を誰かが知っていますかgradient？

これが私のhtmlコードです。

<div id="head">
        <h1>Mira's place</h1><br>
        <h2><span id="quote">Mira is creating huge game named Rock Paper!</span></h2>
        <ul>
            <li>Home</li>
            <li>Games</li>
            <li>Applications</li>
            <li>Contact</li>
        </ul>    
</div>
4

3 に答える 3

4

グラデーションを使用して再試行しますが、次のコードを使用します。

#head /* or body */
{
        -webkit-background-size: 40px 40px;
        -moz-background-size: 40px 40px;
        background-size: 40px 40px;         
        background-image: -webkit-gradient(linear, left top, right bottom,
                                color-stop(.25, rgba(255, 255, 255, .05)), color-stop(.25, transparent),
                                color-stop(.5, transparent), color-stop(.5, rgba(255, 255, 255, .05)),
                                color-stop(.75, rgba(255, 255, 255, .05)), color-stop(.75, transparent),
                                to(transparent));
        background-image: -webkit-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);
        background-image: -moz-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);
        background-image: -ms-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);
        background-image: -o-linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);
        background-image: linear-gradient(135deg, rgba(255, 255, 255, .05) 25%, transparent 25%,
                            transparent 50%, rgba(255, 255, 255, .05) 50%, rgba(255, 255, 255, .05) 75%,
                            transparent 75%, transparent);

         -moz-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
         -webkit-box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);       
         box-shadow: inset 0 -1px 0 rgba(255,255,255,.4);
         width: 100%;
         border: 1px solid;
         color: #fff;
         padding: 15px;
         position: fixed;
         _position: absolute;
         text-shadow: 0 1px 0 rgba(0,0,0,.5);
}

ところで：私はwww.red-team-design.comからこのコードを入手しました。ここにリンクがあります。

于 2013-03-26T20:18:29.717 に答える
2

わからない、あなたが色合いで何を意味するのか。以下はあなたが望んでいたように見えませんか？（いくつかの変更が必要になる場合がありますが、それは進むべき道を示しています）

background: linear-gradient(135deg, #ffffff 0%,#ffffff 25%,#0011ff 25%,#0011ff 35%,#ffffff 35%,#ffffff 65%,#ff0000 65%,#ff0000 75%,#ffffff 75%,#ffffff 100%);

これがフィドルです。

于 2013-03-26T20:18:13.110 に答える
1 
.element{
    border-bottom: 25px solid #2C58DF;
    border-top: 25px solid #D71E26;
    height: 25px;
    width: 150px;
    -webkit-transform-origin: top left;
    -webkit-transform: translateX(165px) translateY(55px) rotate(135deg);
    -moz-transform-origin: top left;
    -moz-transform: translateX(165px) translateY(55px) rotate(135deg);
    transform: translateX(165px) translateY(55px) rotate(135deg);
    transform-origin: left top 0;
}

http://jsfiddle.net/etW25/

于 2013-03-26T20:17:32.057 に答える