3

CSS のみを使用して次のテクスチャ/塗りつぶしを複製する方法はありますか? 背景の塗りつぶしが異なる他のコンテナの上に同じ種類の対角線を使用したいので、パターンを作成して画像として使用することなく、CSS でそれを行う方法があることを願っています。

どうすればこれを行うことができるのでしょうか？おそらく次のようなものになると思います。

<div id="gradientFill">
  <div class="linePattern">
    <!-- Content goes here -->
  </div>
</div>

より良い解決策はありますか？対角線でアルファ/透明度を使用してから、コンテンツも透明にするという問題に遭遇したくありません。

ここに画像の説明を入力

ここに画像の説明を入力

ここに画像の説明を入力

以下に投稿されたソリューション。

4

2 に答える 2

0

正しい解決策：

jsFiddle：対角線が表示されていない場合は、jsFiddleがimgurからホストされている画像への外部リンクを実際に好まないためです。別のタップでimgururlをコピーして貼り付け、キャッシュに入れてから、Fiddleをリロードします。

ソリューションの鍵は、色の背景の相対的な配置と、テクスチャ/線のオーバーレイの絶対的な配置です。この投稿への今後の訪問者のために、画像にテクスチャをオーバーレイする場合は、以下を適用します。

位置：相対

...画像divに、そして：

位置：絶対

...オーバーレイdivに。

<div id="alert">
    Text goes here!
    <div class="lines"></div>
</div>

#alert {
    position:relative;
    padding:10px;
    box-shadow:0px 1px 1px #000,  0px 1px 1px #F5BFB1 inset;

    background: #ea765a; /* Old browsers */
    background: -moz-linear-gradient(top,  #ea765a 0%, #d2583b 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ea765a), color-stop(100%,#d2583b)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top,  #ea765a 0%,#d2583b 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top,  #ea765a 0%,#d2583b 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top,  #ea765a 0%,#d2583b 100%); /* IE10+ */
    background: linear-gradient(to bottom,  #ea765a 0%,#d2583b 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ea765a', endColorstr='#d2583b',GradientType=0 ); /* IE6-9 */
}

.lines {
    position:absolute;
    width:100%;
    height:100%;
    top:0;
    left:0;
    background:url(../img/lines.png);
    opacity:0.05;
}
于 2013-01-07T18:05:07.640 に答える
0

ボタンに複数の背景画像を使用できるため、background-size を使用して上にストライプ グラデーションを並べた標準グラデーションを作成できます。

.stripy {
    background-image:
      linear-gradient(45deg, rgba(255, 255, 255, 0.2) 25%, transparent 25%, transparent 50%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0.2) 75%, transparent 75%, transparent), 
      linear-gradient(bottom, rgb(83,84,84) 0%, rgb(181,181,181) 100%);
    background-size:50px 50px, auto;
}

ストライプは少し太いですが、少し試してみると、必要なものを得ることができるはずです.

于 2013-01-07T17:39:11.980 に答える