4

シナリオ

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 (親) background-imageを削除したいのですが、 fractaldiv background-image は削除したくありません。div
に対する要素の正確な位置がわからないため、この要素 (fractal.jpg の一部など) に背景画像を設定できません。fractal

手伝ってくれてありがとう

マルコ

4

1 に答える 1

0

おそらくこの回避策

パラメータが具体的にわからない場合、次の解決策が役立つ場合とそうでない場合があります。ただし、状況に役立つ場合に備えて提供します。

これがフィドルの例です。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;
}
于 2012-12-01T14:42:36.327 に答える