0

divボックス内の右下隅にある画像を修正しようとしています...テキストがロールオーバーできるようにします

これを達成するために以下のcssを適用しましたが、結果が得られません。

.content_body
{
margin: 0 auto;
width: 100%;
overflow: hidden;
padding-top: 30px;
background: #E6E6E0;
color: #555;
font-family: Tahoma, Arial, sans-serif;
font-size: 14px;
min-height: 800px;
background-image: url(http://types4u.org/Tomike/temp/images/saturation.png) ;
background-position: right bottom; 
background-repeat: no-repeat;
}


#footer
{
background: url(http://types4u.org/Tomike/temp/images/bg2.jpg) #E6E6E0;
color: white;
font-family: Lato, Tahoma, Arial, sans-serif;
font-size: 13px;
line-height: 1.5em;
padding: 40px 50px 50px 50px;
clear: both;
border-top: solid #000033 5px;
}

.design_by
{
float:     right;
font-size: 2.4em;
font-family: 'tangerine', cursive;

color:     white;
}

.copyright
{
float:     left;
font-size: 2.4em;
font-family: 'tangerine', cursive;
color:     white;
}


 <div class="content_body"> 
 hello
  </div>

  <div id="footer">
 <div class="copyright">
     <a href="#">mine.com</a> &copy copyright 2013 all rights reserved.
 </div>  

 <div class="design_by">  
     Design by <a href="http://types4u.org" target="http://types4u.org">types 4 u</a> 
 </div> 
 </div>

例はここにあります

4

2 に答える 2

1

この更新をもう一度参照してください: http://jsfiddle.net/CjXxk/1/

background-repeatコードはすべて問題ありませんが、css コードに追加するのを忘れていたと思います。

.content_body
{
    margin: 0 auto;
    width: 100%;
    overflow: hidden;
    padding-top: 30px;
    background: #E6E6E0;
    color: #555;
    font-family: Tahoma, Arial, sans-serif;
    font-size: 14px;
    min-height: 800px;
    background-image: url(http://types4u.org/Tomike/temp/images/saturation.png) ;
    background-position: right bottom; 
    background-repeat: no-repeat;
}

何background-repeatが？w3schoolsに関するこの記事を参照してください。background-repeat

background-repeat プロパティは、背景画像を繰り返すかどうか/どのように繰り返すかを設定します。

デフォルトでは、background-image は垂直方向と水平方向の両方で繰り返されます。

編集：

background-attachment: fixed;背景画像を固定するために使用します。また、フッターのオーバーラップの問題を で処理できますz-index。

于 2013-01-19T21:02:14.037 に答える
1

以下を追加する必要があります。

background-repeat: no-repeat;

これを追加して、スクロール時に静的にします。

background-attachment: fixed;
于 2013-01-19T21:02:36.420 に答える