0

blockquote する背景画像がありますが、blockquote の下部から 30px 程度で止めたいです。

現在のCSS:

.project-inner-quotes blockquote
{
  background: url("Img/quoteTop.gif") no-repeat scroll center top transparent  ;
  margin: 0 3px 0 3px;
  font-style:italic;
  font-size:14px;
}

その理由は、引用にapタグがあり、閉会のスピーチブーブレがあるからです... 

.project-inner-quotes blockquote > p:last-child 
{
    background: url("Img/quoteBot.gif") no-repeat scroll center bottom transparent;
    padding: 30px 20px 50px 50px;
 }
4

1 に答える 1

1

設計に依存するため、巧妙な方法で css を使用して「偽造」することができます。ここでいくつかの仮定を立てます。まず、blockquote コンテナー要素には #fff 背景があります (実際には任意の色である可能性があります)。

その場合、これを行うことができます：

.project-inner-quotes blockquote > p:last-child {
    background: url("Img/white-image_8x30") repeat-x scroll left bottom transparent;
}

.project-inner-quotes blockquote > p:last-child span {
    background: url("Img/quoteBot.gif") no-repeat scroll center bottom transparent;
    padding: 30px 20px 50px 50px;
    display: block;
}

これにより、下から 30 ピクセルのオフセットが「偽装」されます。背景画像と表示ブロックを取得してパディングを適用するスパン内に p テキストをラップします。

下部の段落に適用される幅 8 ピクセル (タイリングを改善するため)、高さ 30 ピクセルの画像を作成する必要があります。画像の色は、引用トップ画像を「オフセット」するときに取得しようとしている背景の色になります...ただし、メインの背景として無地の色がない場合、このアプローチは失敗します。

不明な場合はお知らせください

于 2012-06-01T11:36:47.643 に答える