1

私は Web 開発は初めてですが、この問題の解決策を何日も探していたので、最終的に質問することにしました。

外部のスタイルシートで背景が定義された空のページがあります。

それとは別に、html ファイルにタグを挿入するだけでなく、外部スタイルシートを介して画像を配置するために使用する div を本文に含めました。

これが私のhtmlファイルです：

<! DOCTYPE html public "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">


<head>
    <title>Azin Productions</title>

    <link rel="stylesheet" type="text/css" href="style/style_2.css">
    <link rel="stylesheet" type="text/css" href="style/MyFontsWebfontsOrderM3219563.css">
</head>

<body>
    <p>Hello World</p>
    <div class="bit_1"></div>
</body>

ここに私のスタイルシートがあります:

    body {
  background: url(images/NYCNEW.jpg);
  background-size:100% 130%;
  background-repeat:no-repeat;
  z-index: -100;

  font-family: Museo-500; calibri;
}

p {
  color:orange;
}

.bit_1 {
  color:blue;
  background-image: url(images/bits/bit_1.png)
  z-index: 500
}

-はい、リンクが正しいと確信しています:)

前もってありがとう、マグナス

4

6 に答える 6

1

の幅と高さを指定し<div class="bit_1"></div>ます。

于 2012-09-11T08:21:51.690 に答える
0

css ファイルがフォルダーにある場合は、画像パスの前に ../ を追加する必要があります。../ はルート フォルダーを表します。

このようにコードを変更します

body {
  background: url(../images/NYCNEW.jpg);
  background-size:100% 130%;
  background-repeat:no-repeat;
  z-index: -100;

  font-family: Museo-500; calibri;
}

.bit_1 {
  color:blue;
  background-image: url(../images/bits/bit_1.png);
  z-index: 500
}

画像パスの前に ../ を追加する必要があります。../ はルート フォルダーを表します。

于 2012-09-11T08:21:11.130 に答える
0

CSSの画像の相対パスがどのように機能するかを知ることは重要url(...)であり、CSS が使用される場所に完全に依存しています。

ページ内に CSS を配置すると、の相対パスはurl(...)ページと同じになります。リンクされた .css ファイル内に CSS を配置すると、の相対パスは.css ファイルurl(...)と同じになります

.css ファイルはstyleディレクトリに配置されているため、次のコマンドは...

background: url(images/NYCNEW.jpg);

... と訳されます...

style/images/NYCNEW.jpg

これを回避するには、CSS ファイルからの相対パスを使用します...

background: url(../images/NYCNEW.jpg);

この動作の理由は、複数のページから .css ファイルにリンクできるようにするためです。各ページは、必要に応じて異なるディレクトリ構造にあります。

また、何らかのコンテンツをbit_1div に提供するか、コントロールにheightandwidthを提供する必要があります。そうしないと、表示されません。(背景画像を div に与えるだけでは、その div は表示されません。これは単に背景であるためです。)

于 2012-09-11T08:27:29.963 に答える
0

こんにちは、なぜあなたはz-index この作品だけpositionを定義しているのですか？

コードを次のように変更します

   body {
  background: url("../images/NYCNEW.jpg");
  background-size:100% 130%;
  background-repeat:no-repeat;

  font-family: Museo-500; calibri;
}

p {
  color:orange;
}

.bit_1 {
  color:blue;
  background: url("../images/bits/bit_1.png") no-repeat 0 0;
}

画像パスを確認してから適用します

于 2012-09-11T08:28:18.837 に答える
0

(;) がありません。div の幅と高さを指定する必要があります。

.bit_1 
{   
color:blue;   
background-image: url(images/bits/bit_1.png); 
z-index: 500;   width:500px;   height:50px; 
}
于 2012-09-11T08:22:16.277 に答える
0

あなたは実際にあなたの問題が何であるかを言いませんが、背景画像が.bit_1divに表示されていないと思いますか? その場合は、表示するために div に高さと幅を設定する必要があります。Div は、その中のコンテンツで自然に展開するだけです。

それ以外に、CSS にさまざまなエラーがあります。

body {
  background: url(images/NYCNEW.jpg);
  background-size:100% 130%;
  background-repeat:no-repeat;

  z-index: -100; - This will not do anything without the 'position' property set. Besides which I would never recommend using negative z-index.

  font-family: Museo-500; calibri; - The 'calibri' will be discarded here because you already ended your declaration at the first semi-colon after 'Museo-500'
}

p {
  color:orange;
}

.bit_1 {
  color:blue;
  background-image: url(images/bits/bit_1.png) - You are missing the semi-colon to end this declaration.
  z-index: 500 - Again no need for this.
}

より良い CSS:

body {
  background: url(../images/NYCNEW.jpg) no-repeat;
  background-size: 100% 130%;    
  font-family: Museo-500, calibri;
}
p {
  color: orange;
}
.bit_1 {
  width: 500px; /* Width of your background images */
  height: 400px; /* Height of your background images */
  color: blue;
  background: url("../images/bits/bit_1.png") no-repeat;
}
于 2012-09-11T08:57:16.430 に答える