css - 从父元素覆盖/删除背景图像

Question

设想

html

<div id='fractal'>
  <div class='centerdotline'>
    <span>Some text</span>
  </div>
</div>

css

#fractal {
 background-image:url('fractal.jpg');
 background-repeat: repeat;
}
.centerdotline {
 background-image:url('dotline.png'); /* with alpha channel */
 background-repeat: repeat-x;
 background-position: center;
}
.centerdotline span {
 padding: 0 20px;

 /*
 override centerdotline background-image
 */
}

我想删除centerdotlinediv ( parent ) background-image 但不是fractaldiv background-image。
我无法在这个元素中设置背景图像（就像一块 fractal.jpg），因为我不知道元素相对于fractaldiv的确切位置

感谢帮助

马可

Answer 1

也许这种解决方法

不知道具体的参数是什么，以下解决方案可能对您有用，也可能没用。但是，我提供它，以防它对您的情况有用。

这是小提琴的例子。HTML 就像您拥有的一样。我删除了你说没有必要line-height的那个。span如果您这样做，则需要在下面相应地调整伪元素height。该高度应大致匹配line-height，通常约为1.1or 1.2，但如果设置为 ，则500px需要height为伪元素。

CSS

#fractal {
    background-image:url('http://marcomolina.com.br/lab/fractal.jpg');
    background-repeat: repeat;
    width:500px;
    height:500px;  
}
.centerdotline {
    position: relative; /* using this to place the dots */
    text-align:center;
}

/* your span can also be set to display: inline-block and have top padding or margin */
.centerdotline span {
    padding: 0 20px;

 /*
 Did not remove, but skipped centerdotline background image by not putting the background there to keep the background of fractal div behind the text
 */
}

/* put the dots in pseudo-elements and position off .centerdotline edges */

.centerdotline span:before,
.centerdotline span:after {
    content: '';
    position: absolute;
    height: 1.2em; /* this might vary slightly by font chosen */
    width: 40%; /* this will vary by text size */
    background-image:url('http://marcomolina.com.br/lab/dotline.png'); /* with alpha channel */
    background-repeat: repeat-x;
    background-position: center;
}

.centerdotline span:before {
    left: 0;
}

.centerdotline span:after{
    right: 0;
}