3

画像を使用せずに CSS3 および HTML5 テクノロジーでこの結果を正確に取得したいと考えています。

ここにHTMLがあります

<div id="overlay"></div>
<div id="lines"></div>

とCSS

body {
    background: #45484d;
    z-index:-5;
}

#lines {
      background-size: 20px 20px;    
    background-image: -webkit-repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 7px),-webkit-repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 7px);
    background-image: -moz-repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 7px),-moz-repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 7px);
    background-image: -o-repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 7px),-o-repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 7px);
    background-image:repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 7px),repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 7px);
    height:100%;
    width:100%;
    opacity:0.14;
    position:absolute;
    top:0;
    left:0;
    z-index:-4;
}

#overlay {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:-3;
}

私はちょっとjsfiddleでいくつかのreusltを取得します:

http://jsfiddle.net/tt13/BA8Wk/2/

しかし、他に何をすべきかわかりません。誰かがこの結果を達成するのを手伝ってくれますか?

http://i.stack.imgur.com/6BrlY.jpg

4

2 に答える 2

2

HTML

<div id="overlay"></div>
<div id="lines"></div>
<div id="lines2"></div>

CSS

body {
    background-image: -ms-radial-gradient(center, circle closest-corner, #636363 0%, #27282B 100%);
    background-image: -moz-radial-gradient(center, circle closest-corner, #636363 0%, #27282B 100%);
    background-image: -o-radial-gradient(center, circle closest-corner, #636363 0%, #27282B 100%);
    background-image: -webkit-gradient(radial, center center, 0, center center, 447, color-stop(0, #636363), color-stop(1, #27282B));
    background-image: -webkit-radial-gradient(center, circle closest-corner, #636363 0%, #27282B 100%);
    background-image: radial-gradient(circle closest-corner at center, #636363 0%, #27282B 100%);
    z-index:-5;
}

#lines {
      background-size: 20px 20px;    
    background-image: -webkit-repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 2px, transparent 20px),-webkit-repeating-linear-gradient(-90deg, #fff, #fff 1px, transparent 2px, transparent 20px);
    background-image: -moz-repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 2px, transparent 20px),-moz-repeating-linear-gradient(-90deg, #fff, #fff 1px, transparent 2px, transparent 20px);
    background-image: -o-repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 2px, transparent 20px),-o-repeating-linear-gradient(-90deg, #fff, #fff 1px, transparent 2px, transparent 20px);
    background-image:repeating-linear-gradient(0deg, #fff, #fff 1px, transparent 2px, transparent 20px),repeating-linear-gradient(-90deg, #fff, #fff 1px, transparent 2px, transparent 20px);
    height:100%;
    width:100%;
    opacity:0.14;
    position:absolute;
    top:0;
    left:0;
    z-index:-4;
}

#lines2 {
      background-size: 100px 100px;    
    background-image: -webkit-repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 100px),-webkit-repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 100px);
    background-image: -moz-repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 100px),-moz-repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 100px);
    background-image: -o-repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 100px),-o-repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 100px);
    background-image:repeating-linear-gradient(0deg, #fff, #fff 2px, transparent 2px, transparent 100px),repeating-linear-gradient(-90deg, #fff, #fff 2px, transparent 2px, transparent 100px);
    height:100%;
    width:100%;
    opacity:0.14;
    position:absolute;
    top:0;
    left:0;
    z-index:-3;
}

#overlay {
    position:absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    z-index:-2;
}
于 2013-01-27T14:51:10.197 に答える
0

これを試してみました（デモ用の-webkitルール（Chrome）のみ）：

background-size: 100px 100px;    

background-image:
   repeating-linear-gradient(0deg, #999, transparent 2px, transparent 20px),
   repeating-linear-gradient(0deg, #fff 1px, transparent 2px, transparent 100px),
   repeating-linear-gradient(90deg, #999, transparent 2px, transparent 20px),
   repeating-linear-gradient(90deg, #fff 1px, transparent 2px, transparent 100px);

(フィドル)

そして、ここにストライプが追加されたものがあります：

background-size:4px 4px; 
background-image: 
  repeating-linear-gradient(45deg, transparent, transparent 1px, #333 2px, transparent 3px);
于 2013-01-27T15:11:40.383 に答える