在背景图像上使用伪元素之前和之后 [英] Using before and after pseudo-elements on background image

问题描述

我想从三个（背景）图像构造导航项目，其中第一个和最后一个固定宽度，中央为可变宽度，具体取决于导航项中文本的宽度。我被引导认为在前后使用伪元素将是最好的方法。当我尝试这些时，导航项目的主（中央）背景图像与前后图像重叠。

你可以看到我的意思< a href =http://soteriabrighton.co.uk/test2/test3.html =nofollow>本页。

以下是CSS：

  .box {
 background-image：url（nav / images /nav_02.png）; 
 background-repeat：repeat; 
 height：20px; 
位置：绝对; 
 padding：10px 13px; 
} 
 
 
 .box：之前{
 left：0; 
 background-image：url（nav / images / nav_01.png）; 
} 
 
 .box：在{
右：0; 
 background-image：url（nav / images / nav_03.png）; 
} 
 
 .box：之前，
 .box：之后{
 content：''; 
 width：13px; 
 height：40px; 
位置：绝对; 
 top：0; 
 background-repeat：no-repeat 
} 
  

HTML：

 < div class =box>这里有一些文字< / div> 
  

我可以使用伪元素以这种方式使用背景图片吗？

谢谢，

Nick

解决方案

是的，但必须使用左右属性将伪元素移动到正确的位置。填充不正确的主盒子的位置。更好地利用保证金。

  .box {
 background-repeat-x：repeat; 
 background-image：url（nav / images / nav_02.png）; 
 background-repeat：repeat; 
 height：40px; 
位置：绝对; 
 margin：0 13px; 
 line-height：40px; 
} 
 
 .box：before，.box：after {
 content：''; 
 display：block; 
 width：13px; 
 height：40px; 
位置：绝对; 
 top：0; 
背景重复：不重复; 
} 
 
 .box：之前{
 left：-13px; 
 background-image：url（nav / images / nav_01.png）; 
} 
 
 .box：在{
右：-13px; 
 background-image：url（nav / images / nav_03.png）; 
} 
  

I am wanting to construct navigation items from three (background) images, with the first and last a fixed width, and the central a variable width, depending on the width of the text in the nav item. I have been led to believe that using the pseudo elements before and after would be the best method. When I try this though, the main (central) background image for the nav item is overlapping with the before and after background images.

You can see what I mean on this page.

Here is the CSS:

.box {
   background-image: url(nav/images/nav_02.png);
   background-repeat: repeat;
   height:20px;
   position: absolute;
   padding: 10px 13px;
}


.box:before {
    left: 0;
    background-image: url(nav/images/nav_01.png);
}

.box:after {
    right: 0;
    background-image: url(nav/images/nav_03.png);
}

.box:before,
.box:after {
    content: ' ';
    width: 13px;
    height:40px;
    position: absolute;
    top: 0;
    background-repeat: no-repeat
}

And the HTML:

<div class="box">here is some text</div>

Can I use background-images in this way using pseudo elements?

Thanks,

Nick

解决方案

Yes, but you will have to use left and right attributes for moving the pseudo elements in the right position. padding is not correct for the main box to position. Better use margin.

.box {
    background-repeat-x: repeat;
    background-image: url(nav/images/nav_02.png);
    background-repeat: repeat;
    height: 40px;
    position: absolute;
    margin: 0 13px;
    line-height: 40px;
}

.box:before, .box:after {
    content: ' ';
    display:block;
    width: 13px;
    height: 40px;
    position: absolute;
    top: 0;
    background-repeat: no-repeat;
}

.box:before {
    left: -13px;
    background-image: url(nav/images/nav_01.png);
}

.box:after {
    right: -13px;
    background-image: url(nav/images/nav_03.png);
}

这篇关于在背景图像上使用伪元素之前和之后的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！