repeating-linear-gradient背景画像として使用する要素を作成しました。現時点では、要素のサイズが背景パターンに悪影響を及ぼします。私の目標は、要素のサイズに関係なく、一貫して同じ背景パターンを生成できるようにすることです。
毎回このパターンを取得する最も簡単な方法は、繰り返すことができるパターンで .png を作成することですが、画像なしでこれを作成する方法はありますか? 従来のブラウザーの互換性は問題ではありません。
この実験を解決するために思いつかなかったかもしれない提案を探しているだけです。
デモンストレーションのために、このコード ペンを作成しました。
HTML
<div class="bar"></div>
CSS
.bar {
display: block;
width: 695px;
height: 44px;
left: 50%;
margin: -22px -347px;
position: absolute;
top: 10%;
background-color: #4d4d4d;
background-image: repeating-linear-gradient(45deg, rgba(0, 191, 255, 0.5), rgba(0, 191, 255, 0.5) 1px, transparent 1px, transparent 15px),
repeating-linear-gradient(-45deg, rgba(39, 216, 5, 0.59), rgba(39, 216, 5, 0.59) 1px, transparent 1px, transparent 15px);
}
.bar.big {
width: 1000px;
top: 25%;
margin-left: -500px;
maring-right: -500px;
}
.bar.small {
width: 400px;
top: 40%;
margin-left: -200px;
maring-right: -200px;
}