Question

在搞乱了伪元素css很长一段时间后，我想出了一个解决方案标题双头自定义图像下划线我需要使用以下代码：

h2{
clear:both;
position:relative;
color:#000;
margin-left:83px;
background:url(http://i.stack.imgur.com/2eRq2.png) 0px 16px repeat-x;
font-size:1.5em;
float:left;
padding:0px 0px 10px 0px;
}

h2:after,
h2:before{
content:" ";
background:url(http://i.stack.imgur.com/AulCS.png);
display:block;
width:83px;
height:31px;
position:absolute;
bottom:0;
left:0;
margin-left:-83px;
margin-bottom:-10px;
z-index:-1;
}

h2:after{
background:url(http://i.stack.imgur.com/ux1ed.png);
right:0;
left:auto;
margin-right:-83px;
}

<h2>Frequently Asked Questions</h2>
<br>
<h2>Home</h2>

在这里可以看到：

http://jsfiddle.net/848s2335/1/

但是我注意到当页面放大和缩小时，3个背景图像似乎不会保持一致。请任何人都指出我正确的方向，以保持所有三个图像一直在线？

感谢您的帮助。

Answer 1

改为使用背景图片，使用border-bottom，这会将行设置在h2的底部，接下来设置after和before的bottom属性以匹配边框的相同位置。

在h2上删除此行：

   public function store(Request $request)
   {
     $rule = 'required|file|mimes:jpg,png,pdf,gif,jpeg,tiff,doc,docx,odt|max:10000';

      $validator = Validator::make($request->all(), [
          'file_one'   => $rule,
          'file_two'   => $rule,
          'file_three' => $rule,
      ]);

      if ($validator->fails()) {
          return redirect('account')
                     ->withErrors($validator)
                     ->withInput();
      }

     // no errors proceed managing your files

    }

而是添加以下行：

background:url(http://i.stack.imgur.com/2eRq2.png) 0px 16px repeat-x;

在你的：之前和之后：在css之后，将你的底部属性改为边界线：

border-bottom: 7px solid #000;

Fiddle

Answer 2

您可以给出h2元素集高度。我增加了27px的高度，它在你的小提琴中适用于我：

h2 {
    clear: both;
    position: relative;
    color: #000;
    margin-left: 83px;
    background: url(http://i.stack.imgur.com/2eRq2.png) 0px 16px repeat-x;
    font-size: 1.5em;
    float: left;
    padding: 0px 0px 10px 0px;
    height: 27px;
}

Answer 3

我设法让左端始终排在第一位：

将所有元素“height设置为相同的值（我使用62px）
在两端设置background-repeat: no-repeat和background-position: center
调整其他值（padding等）

小提琴：http://jsfiddle.net/ecpv2kv0/

右端是0.5px的基线，但可能编辑png图像以获得均匀的高度值（现在它是31px）可能对此有所帮助。

在缩放时对齐标题标签伪元素背景图像？

3 个答案: