お世話になっています。
CSSで画像の水平指定と垂直指定が未だよく解っていないので
教えてください。
width:214pxのnavi.gifをおいた場合
#header li#about a:hover {
background: url(../images/navi.gif) -32px 0;
}
#header li#clients a:hover {
background: url(../images/gnavi.gif) -76px 0;
}
この-32px,0pxや76px,0pxの意味はどういう意味なんでしょうか?
すみません、解る方、お願い致します。
No.3ベストアンサー
- 回答日時:
backgroundってのは、background-color、background-image、
background-repeat、background-attachment、background-position
の5つのプロパティを一度に簡略的に指定するものです。その中では
background-positionだけが長さを値に持つので、backgroundプロパ
ティに長さが書いてあったらbackground-positionに指定すべきもの
だと判断します。
で、backgound-positionの値の定義ですが、最初の長さが水平方向
の位置、2番目が垂直方向の位置です。単位がパーセントではないの
で、画像の左上端と要素の左上端の位置関係であり、-32px 0 とい
うことは画像の左端は要素の左端より32ピクセル左に寄っていて、
画像の上端が要素の上端に一致しています。速い話が背景画像の左
側32ピクセルは隠れています。
今回の例では該当するリストの各要素の幅が決められていて、一つ
の画像の一部分を見せることで画像リンクのように見せているんで
しょうね。読み込みが一度だけになるので、マウスが移動したとき
に素早く背景画像が切り替わる効果を期待している訳です。
解りやすい説明ありがとうございます!目からうろこが落ちました。
「backgroundってのは、background-color、background-image、
background-repeat、background-attachment、background-position
の5つのプロパティを一度に簡略的に指定するものです。」
なるほど!!
ありがとうございました。
No.1
- 回答日時:
背景画像の位置指定だと思いますが、この例では-(マイナス)が付いているので、X方向で画面から左に出てしまっているように思います。
どこか別のところで中心配置指定がしてあるとか、ないですかね。
お探しのQ&Aが見つからない時は、教えて!gooで質問しましょう!
似たような質問が見つかりました
- HTML・CSS img と p を縦中央に配置したいのですがうまくいきません。 2 2023/01/12 14:38
- HTML・CSS 書籍を見つつサイト造りの練習をしているのですが、見た目が一致しません 2 2022/11/28 15:00
- JavaScript ソースコードのいじる場所が分かりません。 1 2022/12/23 02:06
- HTML・CSS ヘッダーの画像にメインエリアがかぶってしまいます 1 2022/11/28 14:06
- JavaScript vertical sliderをautoplayしたい 2 2022/08/25 14:47
- HTML・CSS 検索窓とcssハックについて 3 2022/04/22 12:21
- HTML・CSS CSS上での計算を行うためのルールについて教えてください。 3 2022/08/15 14:43
- HTML・CSS cssの display: flex;で横並びにならずに困ってます 1 2022/12/04 13:18
- 防災 【自衛隊のPX品のPXってどういう意味ですか?】 3 2022/07/02 13:12
- HTML・CSS スクロールすると追従する画像のコードを書いているのですが、追従する画像の大きさの調節が上手くいきませ 2 2022/04/18 12:52
関連するカテゴリからQ&Aを探す
おすすめ情報
デイリーランキングこのカテゴリの人気デイリーQ&Aランキング
-
<hr>の縦バージョンはありますか?
-
画像とその下にあるテキストの...
-
particles.jsの背景の上にテキ...
-
iframe内をクリックさせない方...
-
CSSでテキストのリストの・...
-
帯を画面いっぱいに表示したい
-
画像で背景透明のテキストがに...
-
WEB上でディレクトリ内の画像を...
-
【Webサイト】画像が小さく表示...
-
同じ画像 複数回使用
-
画像の上にテキスト配置で、拡...
-
ページの上下に白い横線が入る
-
htmlかcssで背景の白い枠をなく...
-
外部CSSで画像にリンクを貼りたい
-
テーブルセルの背景画像のサイ...
-
【至急お助け!】チェックボッ...
-
テキストの横にアイコンを並べたい
-
「HTML(縦スクロールバー付)...
-
IEで<div>の下の<img>がずれる
-
HTML・CSSコーディングが上手く...
マンスリーランキングこのカテゴリの人気マンスリーQ&Aランキング
-
画像の上にテキスト配置で、拡...
-
画像とその下にあるテキストの...
-
<hr>の縦バージョンはありますか?
-
【至急お助け!】チェックボッ...
-
【Webサイト】画像が小さく表示...
-
background-repeat CSS で切れ...
-
htmlかcssで背景の白い枠をなく...
-
background-sizeの背景で最小値...
-
lightbox2で画像を天地左右中央...
-
ページごとに背景画像を変更し...
-
LightBoxの矢印の出し方
-
WEB上でディレクトリ内の画像を...
-
IMGタグで画像の繰り返し使用は…
-
iframe内をクリックさせない方...
-
同じ画像 複数回使用
-
画像上に文字を表示するとiPhon...
-
background-sizeでcontainする...
-
ページの上下に白い横線が入る
-
コーディング中、右側に謎の余...
-
画像を複数横に並べ、かつそれ...
おすすめ情報