2015-08-27 55 views
2

我需要在我的頁面上浮現一些文字,如附圖所示。我想不要使用JavaScript。在純CSS中可以做到這一點嗎?圍繞非矩形對象浮動文字

example of the layout

+0

CSS3有一些[動畫]功能(http://www.w3schools.com/css/css3_animations.asp),但舊版瀏覽器將無法執行它。查看可用性up [here](http://caniuse.com/) – Xyv

回答

2

使用CSS的形狀,如果你不是太擔心與舊版瀏覽器的兼容性。

.element{ 
    shape-outside: url(image.png); 
    shape-image-threshold: 0.5; 
    float: left; 
} 

http://www.html5rocks.com/en/tutorials/shapes/getting-started/

+0

這是今天唯一存在的css解決方案。 +1 – Abhitalks

+0

這是一個很好的解決方案,但缺乏瀏覽器兼容性。它甚至不被最新的Firefox或Edge支持。 – pfcode

1

可能會在padding屬性是什麼意思?

.container { 
 
    background: url('someimage.png') no-repeat left bottom; 
 
    border: 1px solid #111; 
 
    color: #666; 
 
    font: 9pt/14pt 'consolas'; 
 
    padding: 40px 12px 12px 40px; 
 
}
<div class="container"> 
 
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 
 
</div>

哦......我不知道你的意思是文本彎腰形象!對不起,請參閱evilunix的答案,因爲我不想複製別人的解決方案。