どうも！LSSです！！
今回は、【CSS+SVG】インラインSVGを背景画像に指定に続き、画像ファイル不要で使える背景模様を考えてみました！
ちょっと変テコな模様
CSS＋SVGで描いているので画像ファイルのアップロード不要です^^
ちなみに、アルファベット小文字の a をモチーフにしています。
この調子で作っていくと２６種類の背景画像ネタを作れる事に！？ｗ
コード
<style><!--
.bga{
padding:0.6em;
background-color:#ffddff;
background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="6" height="6" viewbox="0 0 6 6" stroke="rgb(230,255,230)" stroke-width="1.1"><path d="M -1,1 L 3,1 3,5 1,5 1,3 5,3 5,7" fill="none"></path><path d="M 5,-1 L 5,1 7,1" fill="none"></path></svg>');
background-size:50px;
}
--></style>
<div class="bga">中に入れる文章</div>
改変について
コード中、赤文字部分が改変しやすい部分です。
background-color:#ffddff;
バックの色を指定しています。
stroke="rgb(230,255,230)"
のたくっている線の色はここで指定しています。
rgb(230,255,230)…ちょっと見慣れない形式かもですが、「stroke="blue"」など色名でもOKです^^
stroke-width="1.1"
線の太さです。0.1～1.9ぐらいの間で指定するのが良いかと思います。
background-size:50px;
模様の大きさを指定しています。
<div class="bga">中に入れる文章</div>
中に入れる文章は自由に書き換えられます。
改行は<br/>タグを入れるか、はてなブログの「編集 見たまま」画面上でシフトキーを押しながらエンターキーを押してください。
CSSだけでも出来たかも？ですが
この変な線の模様だと、もしかしたらSVGの方がコード短くて済むかもですねｗ
同様にｂ，ｃ，ｄ，ｅ，ｆ…と考えていくと、26種類もネタに困らずに済む事になります！！ｗ
この背景、使ってみたいという方がおられましたら、ご自由にどうぞです^^
ってなとこで、今回はこのへんで！
次回もまた、よろしくお願いします^^
