Question

我按照答案尝试在www.thexxcorporation.com

中找到类似的外观

第一个标题是使用短代码（它是一个Wordpress网站）。

我的问题是短代码没有反映他们的实际样式设置，因此，我试图重现外观，但我自己的尺寸，图像等。

我试过这个：

h1:after
{
background:url(image path);/* apply your image here */
background-repeat:repeat-x;
content:" ";
position:absolute;
width:999em;
height:25px;
margin:10px 0 0 5px;
}

这几乎可行，但有问题。该样式与带有内容div的标题相关。我的其他听觉适合div精细（div的宽度的100％）。

上面的代码导致背景图像溢出其所在的内容div之外。

那么，我如何将它约束到它所在的div的宽度？

我的网页代码如下所示：

<div id="main-content" class="clearfix">    
       <header id="page-heading">
           <div class="boxed">
              <h1>Test</h1> 
                    </div><!-- /boxed -->
    </header><!-- /page-heading -->


   <div id="home-content" class="clearfix boxed container">
    <article id="post" class="clearfix">
        <div class="entry clearfix fitvids">
            <h1>Test page for H1</h1>
        </div><!-- .entry .clearfix -->
    </article><!-- #post -->

    <aside id="sidebar">
    </aside><!-- /sidebar --></div><!-- #home-content -->

   <div class="clear"></div>

包含div的位置为：relative。

如果我添加位置：相对于h1：之后 - 背景图像消失。

有点困惑。

干杯，

麦克

Answer 1

它所处的div应处于相对位置。将此样式添加到div

position:relative;

和h1 :: after应该有100％的宽度 - 不要使用em。将宽度更改为

width:100%;

希望这会有所帮助欢呼声

使用带有“H”标记的背景图像

1 个答案: