Question

页面显示设置为浮动的横幅图像，以便重新调整页面大小使横幅保持居中。

我想在相对于横幅左下角的位置显示一些位于横幅图像上的文字。希望是当页面被重新调整大小并且横幅图像移动时，文本也是如此。（文本将根据脚本中设置的某些条件而改变。）

尝试使用css，我可以在图像上获取文本，但在调整页面大小时它不会移动。阅读其他人所做的事情，我将div设置为图像的占位符。文本设置在

中，此选择器的css位置设置为“relative”。我知道css有效，因为我可以更改文本颜色和大小等。但是我为文本设置的任何css位置都不会改变文本浮动特征！

这是我的代码，它通过php脚本呈现。任何人都知道这里有什么问题吗？

<!--  html  -->
<div id="wbr_logo" align="center"></div>

<!-- later on down the script.. -->
<?php
function HeaderTitle($cTitle='')
{   
?>
  <div class="wbr_logo" ><H1><?php echo $cTitle;?></H1></div>
<?php
}

<!-- css -->

.wbr_logo {
position:relative;
    height: 200px;
    background-image: url("/ADMIN/images/banner.png"); 
    background-repeat: no-repeat;
    background-position: center;
 }

.wbr_logo H1 {
position:relative;
color:red;
}

<小时/> 以下效果很好（非常感谢DMCS）

<div class="wbr_logo"><h1><div id="floating_text"></div></h1></div>

function HeaderTitle($cTitle='')
{   
    ?>
        <script type="text/javascript">
            $('#floating_text').html("<?php echo $cTitle;?>");
        </script>
    <?php
}

.wbr_logo {
  position: relative;
  width: 1260px;
  height:180px;
  margin: 0 auto; /* centers it */
  background-image: url("/ADMIN/images/wbs_admin_banner.png"); 
}

#floating_text {
  position: absolute;
  left: 2px;
  bottom: 2px;
  color:white;
}

Answer 1

<div class="wbr_logo"><div class="floating_text">Title here</div></div>


.wbr_logo {
  position: relative;
  width: imageWidth + 'px';
  margin: 0 auto; /* centers it */
  background-image: url("/ADMIN/images/banner.png"); 

}

.floating_text {
  position: absolute;
  left: 2px;
  bottom: 2px;
}

css：在居中图像上浮动文本

1 个答案: