3

たとえば、次のように div があり、その中にいくつかのテキスト コンテンツがあります。

<div>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque eu sapien
    sed massa placerat rutrum. In tristique purus eget porta pharetra.</div>

次に、FontAwesome のアイコンを背景に追加します。次のようにします。

ここに画像の説明を入力

divでアイコンを少し「トリミング」したいのですが、失敗しました。アイコンがブロックとして表示されている場合、 を使用して切り取ることができないためですoverflow: hidden。

この効果を達成する方法を知っている人はいますか？

4

3 に答える 3

4

これは、相対位置と絶対位置を使用して行うことができます。

始めるための大まかな例を次に示します: http://jsfiddle.net/n57uf/1/

<div class="parent">
    <i class="icon-star-empty icon-4x child"></i>
    <p class="content">Lorum ipsum lorum ipsum etc tect</p>
 <div>

.parent {
    position: relative;
    border:1px solid black;
    height: 200px;
    width: 200px;
    overflow: hidden;
}

.child {
    position: absolute;
    top: -15px;
    left: -20px;
}

.content {
    padding: 10px;
    font-size: 16pt;
}
于 2013-07-07T02:58:22.010 に答える
0

私は解決策を思いつきました：

<div class="wrapper">
    <i class="icon-star"></icon>
    <div>Lorem ipsum dolor sit amet ...</div>
</div>

両方の子を左にフロートし、負のマージンを持つように設定します。

更新:ああ...ジェイソンが私を打ち負かしました。

于 2013-07-07T03:01:55.660 に答える