X Course Advisor FREE Course Advisor
(Close)
Watch Tutorials
macProVideo.com
Close

無料プレミアムアクセス

プレミアムハブの記事、プロジェクトファイルとから、各チュートリアルビデオの最初の10%の私たちのライブラリ全体にアクセスするオンラインチュートリアルのライブラリを

今すぐ無料アカウントを作成しよう!

CSSを使用してタイル張りの背景の設定
Google翻訳で翻訳さ

Setting up tiled backgrounds via CSS is a great way to add visual appeal to your website and to layout components that make up your overall design. The good news is, it's super easy, and there are some additional properties that we can make use of to further control our backgrounds. Let's check it out!

ステップ1

まず最初の最初 - 我々は、タイルのグラフィックを必要とする!おそらくこれを行う最良の場所はにありますPhotoshopの 。それは透かし、ロゴ、または実際にあなたが好きなものとして現れるだろうように、軟化グラフィックを使用することができます。グラフィックが大きすぎるではないことを確認し、PNG、JPEG、またはGIFとして保存します。今、私たちは私たちのレイアウトでそれを使用する準備が整いました。

ステップ2

次に、我々はCSSを経由して私たちのレイアウトにグラフィックをロードします。これは、ハンドコーディングの少しを必要としますが、それはやってのけるには余りにも難しいものではありません。まず、に背景グラフィックを適用したいCSSルールを見つけます。これは、div要素、クラスのルール、またはあなたが使用されているかもしれない他のルールを制御しているIDセレクタである可能性があります。私の例では、再定義、body要素に背景グラフィックを適用するつもりです。

フルコロン、その後、"URL"に続いて"背景画像"プロパティに追加します。セミコロンに続くあなたのグラフィックへのパスの後、括弧内、入力、。例えば、私のコードがどのように見えるかは以下の通りです:

背景画像:のURL(画像/ Background.png);

私のグラフィック、"Background.pngが"という名前のフォルダ内部に配置されていることに注意してください"のイメージ。"ファイルを保存し、ブラウザであなたの仕事をプレビューしてください。デフォルトではどのような背景のグラフィックタイルに注意してください。我々は物事をあるがままに残す、または追加のCSSプロパティを使用して、さらに物事をカスタマイズし続けることができます。

ステップ3

あなたがタイルの動作を制御したい場合、あなたは"はbackground - repeat"プロパティで追加することができます。その後、"リピート- X、""リピート- yを、"または"、繰り返す"に値を設定することができます"ノー繰り返しを。"リピート- xとは、繰り返しがタイルを許可しませんしながら、唯一の水平または垂直方向にタイルリピート- yの力。

ステップ4

Another option that we have available is the ability to control the horizontal and vertical positioning of a non-tiling background image. Try adding in the "background-position" property, followed by two pixel values. The first pixel value is the graphic's horizontal position, and the second, its vertical position.


As you can see, CSS makes it super-easy to control background images. The fun part is coming up with cool graphics and seeing what's possible. Try experimenting with different tiled images, gradients, and patterns. Have fun!

Geoff Blake

Geoff Blake | Articles by this author

Geoff Blake is a book author, video presenter, designer, and visual artist. As an in demand live-on-stage software educator since 1997, Geoff has taught desktop publishing, web design and graphics courses all over North America and is regarded as an expert in Adobe's Creative Suite applications, as well as in HTML, CSS, WordPress, and related technologies. With his humorous, non-jargonny approach, Geoff produces highly regarded articles, video training and DVDs, and regularly contributes to top industry magazines and websites.

Comments

You must be logged in to post a comment.
Create an Account  Login Now

What is macProVideo.com?

macProVideo.com is an online education community featuring Tutorial-Videos & Training for popular Audio & Video Applications including Adobe CS, Logic Studio, Final Cut Studio, and more.
© 2018 macProVideo.com
a division of NonLinear Educating Inc.
Link