0

このような Web ページを作成しようとしています(スクリーンショットの部分のみ)。そのチュートリアルとインターネット上の他のチュートリアルに従おうとしましたが、うまくいかないようです。これは私のcssコードです：

  /* CloudBase 2.0 overrides for Gantry Framework */

/* Basic styles */
body {color: #333;}

 background:url(../images/St%20Pauls.jpg);



#rt-header, #rt-bottom {color: #333333;}
.rt-container {background: #fff;} 
.rt-article a{text-decoration: underline;}
a:hover {color: #000; text-decoration: none;}
#rt-footer, #rt-copyright, #rt-copyright a {color: #333333;}
#rt-sidebar-a {background-color: transparent;}
#rt-sidebar-b {background-color: transparent;}
#rt-sidebar-c {background-color: transparent;}
#gantry-viewswitcher {margin: 0 auto 1em;position: relative;}
#rt-accessibility .button{
  padding: 0px;


}
#rt-accessibility .button, .rt-joomla .icon {
  background-image: url(../images/typography.png);
}

/* Layers structure */
#page-wraper{
  width: 998px;
  padding: 0px 37px;
  margin: 20px auto 0px auto;
  background: url(../images/background/shadow.png) 50% 0px no-repeat;
}
#in-page-wraper{  
  background: url(../images/background/bottom-shadow.png) center bottom no-repeat;
  padding-bottom: 51px;
}
#in-page-wraper-2{
  background: url(../images/background/content-background.png);
  border: 1px solid #fff;
  padding-top: 25px;
  padding-bottom: 25px;
  min-height: 500px;
}
.rt-container{
  background: none;
}
#rt-mainbody{
  background: #fff;

  margin: 0px;
  -moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);
  -webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);
  box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);
  padding: 6px;
  overflow: hidden;
}
#rt-mainbody .component-content{
  border: 1px solid #dcdcdc;
  padding: 15px;
  overflow: hidden;
}

の

background:url(../images/St%20Pauls.jpg);

部分が何らかの理由で機能していないようです。これが基本的な質問である場合はお詫び申し上げます。

ありがとう！！

4

3 に答える 3

0

まず、イメージへのパスを確認する必要があります。ブラウザを開き、URL を次のように入力します。

http://your_domain/../images/St Pauls.jpg

よろしければ、画像をご覧ください。

次に、画像へのパスを設定するには引用符を使用する必要があります。これは、に置き換える必要があることを意味します

背景: url('../images/St Pauls.jpg');

第三に、スペースを含まないファイル名を使用することをお勧めします。

最後に、あなたの CSS は有効ではありません。修正する必要があります

/* CloudBase 2.0 overrides for Gantry Framework */

/* Basic styles */
body {
    color: #333;
    background: url('../images/StPauls.jpg');
    position: fixed;
}

#rt-header, 
#rt-bottom {color: #333333;}
.rt-container {background: #fff;} 
.rt-article a {text-decoration: underline;}
a:hover {color: #000; text-decoration: none;}
#rt-footer,
#rt-copyright,
#rt-copyright a {color: #333333;}
#rt-sidebar-a {background-color: transparent;}
#rt-sidebar-b {background-color: transparent;}
#rt-sidebar-c {background-color: transparent;}
#gantry-viewswitcher {margin: 0 auto 1em;position: relative;}
#rt-accessibility .button{ padding: 0px; }
#rt-accessibility .button,
.rt-joomla .icon {
    background-image: url('../images/typography.png');
}

/* Layers structure */
#page-wraper{
  width: 998px;
  padding: 0px 37px;
  margin: 20px auto 0px auto;
  background: url('../images/background/shadow.png') 50% 0px no-repeat;
}
#in-page-wraper{  
  background: url('../images/background/bottom-shadow.png') center bottom no-repeat;
  padding-bottom: 51px;
}
#in-page-wraper-2{
  background: url('../images/background/content-background.png');
  border: 1px solid #fff;
  padding-top: 25px;
  padding-bottom: 25px;
  min-height: 500px;
}
.rt-container{
  background: none;
}
#rt-mainbody{
  background: #fff;

  margin: 0px;
  -moz-box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);
  -webkit-box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);
  box-shadow: 2px 2px 9px rgba(0,0,0,0.1), -2px -2px 9px rgba(0,0,0,0.1);
  padding: 6px;
  overflow: hidden;
}
#rt-mainbody .component-content{
  border: 1px solid #dcdcdc;
  padding: 15px;
  overflow: hidden;
}

それでも画像が表示されない場合は、background: url('/images/StPauls.jpg');またはとして使用してみてくださいbackground: url('images/StPauls.jpg');

于 2013-07-09T22:10:36.070 に答える
0

バックグラウンド宣言が body 要素に適用されていることを確認する必要があります。

body {
  color: #333;
  background:url(../images/St%20Pauls.jpg);
}

指定した画像が画像ディレクトリに正しく配置されていることも確認する必要があります。

于 2013-07-09T22:10:38.993 に答える
0

このbackground属性はどの CSS 要素にも含まれていないようです。表示するには、適切な CSS セレクタ要素に挿入する必要があります。現時点では、リンクはぶら下がっているだけで、ドキュメントのどの部分にも適用されていません。

于 2013-07-09T22:11:27.737 に答える