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，请参阅this article：

background-repeat属性设置背景图像是否/如何   重复。

默认情况下，背景图像垂直重复   水平。

修改

使用background-attachment: fixed;修复背景图片。您还可以使用z-index处理页脚重叠问题。

Answer 2

您需要添加：

background-repeat: no-repeat;

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

background-attachment: fixed;

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

2 个答案: