画像がない場合は、バックグラウンド全体に合わせてHTML要素を繰り返す方法

CSS *を使用して繰り返すように設定できるdiv要素が必要ですが、これはバックグラウンドでのみ可能ですイメージ（background-image：...; background-repeat：repeat;）。私は通常のdivでそれをどうやって行うことができますか？画像がない場合は、バックグラウンド全体に合わせてHTML要素を繰り返す方法

注：divには2つのポリゴンが含まれているsvgが含まれています（2つの正三角形が正方形になります）。

*編集：これを行うにはCSSを使用してみて、非常に奇妙な結果が得られました。私はJavascriptがこれのためのより良いオプションだと思います。

 <div class='square' style="background-repeat:repeat-x;"> 
      <svg viewBox='0 0 100 100'> 
       <polygon points='0,0 2,0 0,2' /> 
       <polygon points='2,0 2,2 0,2' /> 
      </svg> 
     </div>

出典

2017-05-18 Mr.AwfulAtProgramming

あなたはJavaScriptでこれを行う方法を知っているあなたはCSS – cpcdev

@cpcdevでこれを行うことができると思ういけませんか？ –

svgをdata-uriとして使用すると、background-image URLとして使用できます。次に、あなたはbackground-repeatを使用できるはずです。たとえば、http://stackoverflow.com/questions/10768451/inline-svg-in-cssを参照してください。 – yezzz

ここでは、「@yezzz」と言及されているCSSアプローチがあります。

html, body {padding: 0; margin: 0;} 
 

 
body { 
 
    background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48c3ZnIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHZpZXdCb3g9IjAgMCAyIDIiIHhtbDpzcGFjZT0icHJlc2VydmUiPiAgICAgIDxwb2x5Z29uIHBvaW50cz0nMCwwIDIsMCAwLDInIGZpbGw9JyNjYzU1NTUnIC8+ICA8cG9seWdvbiBwb2ludHM9JzIsMCAyLDIgMCwyJyBmaWxsPScjNTVjY2NjJyAvPjwvc3ZnPg==); 
 
    height: 100vh; 
 
    width: 100vw; 
 
    background-size: 100px; 
 
}

エンコードされたSVGは、以下で表すことができます。

<?xml version="1.0" encoding="utf-8"?> 
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
    viewBox="0 0 2 2" xml:space="preserve">  
    <polygon points='0,0 2,0 0,2' fill='#cc5555' /> 
    <polygon points='2,0 2,2 0,2' fill='#55cccc' /> 
</svg>

出典

2017-05-22 19:59:48

画像がない場合は、バックグラウンド全体に合わせてHTML要素を繰り返す方法

答えて

関連する問題