1

わかりましたので、モザイク(ホバー テキストなどの jQuery プラグイン) を使用しています。私は言葉を取得しようとしています:「販売アイテム」がお互いの上に表示され、スペースがほとんどありません。ただし、改行「br/」を使用すると、行間のスペースに大きなギャップが残ります。表示プロパティをブロックに設定しようとしました。2 つの "p" 要素を "top" と "bottom" として設定し、そのように配置します。私は、CSSに非常に精通している誰かに助けてもらいたいと思っています。

基本的に、テキストを適切に整列させようとしています。

HTML:

<div class="mosaic-block demo" id="sale">
    <div class="mosaic-overlay">
        <h1 class="mosaic">sale items</h1><br/>
        <p><strong>get them before they're gone!</strong></p>
    </div>
    <div class="mosaic-backdrop"><img src="img/sale.png" /></div>
</div>

CSS:

h1.mosaic {
    display: inline;
    font-family: "ONRAMP";
    margin: 0;
    padding-left: 90px;
    padding-top: 0;
    font-size: 60px;
    text-transform: capitalize;
    width: 110px;
}
.mosaic-block {
    position: absolute;
    overflow: hidden;
    width: 320px;
    height: 150px;
    left: 50%;
    top: 475px;
   -webkit-filter: grayscale(1);
}
.mosaic-block:hover {
    -webkit-filter: grayscale(0);
}
.mosaic-backdrop {
    display: none;
    position: absolute;
    top: 0;
    height: 100%;
    width: 100%;
}
.mosaic-overlay {
    display :none;
    z-index: 1;
    position: absolute;
    height: 300px;
    bottom: -150px;
    color: #FFF;
    text-decoration: none;
}
.mosaic-overlay p {
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
    text-transform: uppercase;
    color: #fff;
    padding-top: 90px;
    padding-left: 30px;
}

jQuery の側面は正常に機能し、その仕事を行います。しかし、私のCSSが欠けています。

4

1 に答える 1

1

line-heightおそらく、CSSで定義されていないCSS プロパティを探しているので、これは簡単なはずです。まず、2 つの単語を別々の行に強制します。

<div class="mosaic-block demo" id="sale">
    <div class="mosaic-overlay">
        <h1 class="mosaic">sale<br/> items</h1><br/>
        <p><strong>get them before they're gone!</strong></p>
    </div>
    <div class="mosaic-backdrop"><img src="img/sale.png" /></div>
</div>

プロパティを追加しline-heightて値を割り当てます。60px のフォント サイズで何が問題ないかを推測しましたが、フォントがわからないので、おそらくそれを高く/低く調整する必要があります。

h1.mosaic {
    display: inline;
    line-height: 50px;
    font-family: "ONRAMP";
    margin: 0;
    padding-left: 90px;
    padding-top: 0;
    font-size: 60px;
    text-transform: capitalize;
    width: 110px;
}

テキストがボックスによって切り取られている場合は、必要に応じて上部/下部にパディングを追加して、目的の外観にすることができます。

于 2012-06-25T21:38:13.507 に答える