用文字圍繞雙引號圖片

我在段落中添加文字。我想在文本週圍引用引號（如圖片）。用文字圍繞雙引號圖片

<p class="aboutus" style="font-style: impact;font-size: medium"> 
test test test test test test test test test test test test test test test test . 
</p>

如果我想在文本週圍添加雙引號，這可以正常工作。

p.aboutus:before { 
    content: '"'; 
} 

p.aboutus:after { 
    content: '"'; 
}

但現在如果我有圖片（quote1.jpeg和quote2.jpeg）的雙引號，如果我在僞選擇添加<img src>，這是行不通的。爲什麼不？

來源

2013-03-03 user1411837

您需要指定與url()語法圖片：

p.aboutus::before { 
    content: url('../images/quote1.jpeg'); /* Or wherever it is */ 
} 

p.aboutus::after { 
    content: url('../images/quote2.jpeg'); 
}

注意，URL是相對於包含樣式表的位置;不是你的頁面。

來源

2013-03-03 15:02:24 Ryan

作品：http://jsfiddle.net/ECEbJ/ – kay 2013-03-03 15:05:03

@Kay：有與文字環繞方式的問題演示。在某些情況下，文本的一部分會顯示在關閉引號之下（取決於瀏覽器的寬度）。這是由於文本的非常大的行高，這是由於將大引號作爲內聯內容而產生的。爲了避免這種情況，圖像必須足夠短以適應文本的預定線高度。 – 2013-03-03 17:46:31

除非您需要一些非常特殊的樣式，否則可能足夠使用純文本作爲引號，而不是圖像。

下面是一個JSFiddle demo的例子。

第一個使用純文本，第二個使用圖像。它們在外觀上幾乎完全相同（在IE8/9/10，FF，Safari，Chrome，Opera中測試過）。兩者都允許顯示任何大小的引號，而不會影響文本的第一行和最後一行的行高（在內聯添加大圖像時發生）。

下面是代碼的簡化版本（詳細信息請參閱demo）。

純文本

.text-quotes blockquote { 
    position: relative; 
    margin: 0; 
    padding: 8px 0 22px 0; 
    text-indent: 36px; 
} 
.text-quotes blockquote:before, 
.text-quotes blockquote:after { 
    position: absolute; 
    font-size: 60px; 
} 
.text-quotes blockquote:before { 
    content: '\201C'; /* Left double quote */ 
    left: -36px; 
    top: 8px; 
} 
.text-quotes blockquote:after { 
    content: '\201D'; /* Right double quote */ 
    right: 0; 
    bottom: -13px; 
}

圖片

.image-quotes blockquote { 
    position: relative; 
    margin: 0; 
    padding: 8px 0 22px 0; 
    text-indent: 36px; 
} 
.image-quotes blockquote:before, 
.image-quotes blockquote:after { 
    display: block; 
    position: absolute; 
    width: 27px; 
    height: 21px; 
} 
.image-quotes blockquote:before { 
    content: url(http://www.forestpath.org/test/misc/double-quote-left.png); 
    left: -35px; 
    top: 0; 
} 
.image-quotes blockquote:after { 
    content: url(http://www.forestpath.org/test/misc/double-quote-right.png); 
    right: 35px; 
    bottom: 0; 
}

來源

2013-03-03 17:24:41

用文字圍繞雙引號圖片

回答

相關問題