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
 */
}

我想删除centerdotline div（父）背景图片，但不删除fractal div background-image。我不能在这个元素中设置背景图像（就像一段fractal.jpg），因为我不知道元素与fractal div

也许这个解决方法

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

Here is the fiddle example。 HTML就像你拥有它一样。我删除了您认为不必要的line-height上的span。如果您这样做，则需要在下面相应地调整伪元素height。该高度应大致匹配line-height，通常约为1.1或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;
}

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

1 个答案:

也许这个解决方法