html - 如何修复div框的显示图片右下角

Question

我正在尝试修复 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>

一个例子在这里jsfiddle

Answer 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-attachment: fixed;固定背景图像。您也可以使用z-index.

Answer 2

您需要添加：

background-repeat: no-repeat;

添加它以使其在滚动时保持静态：

background-attachment: fixed;