このツールについて
CSS 背景ジェネレーターで作成
画像の配置、サイズ、繰り返し、グラデーションオーバーレイをプレビューし、一致する CSS をコピーします。
ローカル画像をアップロードして、カバー、コンテイン、配置、繰り返し、オーバーレイをプレビューします。公開アセットパスを個別に設定します。生成された CSS はそのパスを使用し、ソースファイルを埋め込んだりアップロードしたりしません。
CSS 背景ジェネレーター
画像の配置、サイズ、繰り返し、グラデーションオーバーレイをプレビューし、一致する CSS をコピーします。
端末内で処理 登録不要
ローカル開発者ツール
使い方
- 01
ソースを準備する
サポートされているソース画像を選択するか、ツールが提供する場合はテキストテンプレートから開始してください。
- 02
結果を調整する
ローカル画像をアップロードして、カバー、コンテイン、配置、繰り返し、オーバーレイをプレビューします。公開アセットパスを個別に設定します。生成された CSS はそのパスを使用し、ソースファイルを埋め込んだりアップロードしたりしません。
- 03
確認とダウンロード
完全なプレビューと出力設定を検査します。完成したアセットをダウンロードし、比較用にオリジナルを保持します。
より良い結果のヒント
- ローカルプレビューは選択したファイルを使用します。ウェブサイトにはホストされたアセットまたはプロジェクト内のパスが必要です。そこに画像をアップロードまたはコピーし、CSS パスがスタイルシートから解決されることを確認してください。
- 結果を確認するまで元のファイルを保持してください。
- 意図した表示サイズで小さなテキストと細かいエッジを検査してください。
- 画像処理はブラウザ内で行われます。タブを閉じる前に結果をダウンロードしてください。このツールは元のファイルを上書きしません。
よくある質問
CSS 背景ジェネレーターの使い方は？ +
サポートされているソース画像を選択するか、ツールが提供する場合はテキストテンプレートから開始してください。ローカル画像をアップロードして、カバー、コンテイン、配置、繰り返し、オーバーレイをプレビューします。公開アセットパスを個別に設定します。生成された CSS はそのパスを使用し、ソースファイルを埋め込んだりアップロードしたりしません。
コピーした CSS に画像パスが必要なのはなぜですか？ +
ローカルプレビューは選択したファイルを使用します。ウェブサイトにはホストされたアセットまたはプロジェクト内のパスが必要です。そこに画像をアップロードまたはコピーし、CSS パスがスタイルシートから解決されることを確認してください。
入力はどこで処理されますか？ +
画像処理はブラウザ内で行われます。タブを閉じる前に結果をダウンロードしてください。このツールは元のファイルを上書きしません。
どのファイルを使用できますか？ +
受け入れ可能な入力: JPG、PNG、WebP、AVIF、GIF。利用可能な出力: TXT。ブラウザのデコードサポートと選択した出力設定によって、どのソースファイルを処理できるかが決まります。
アカウントは必要ですか？ +
このツールにアカウントは不要です。デバイスに保存する前に出力を確認できます。