使文本避免的div佈局問題

Here是PIC使文本避免的div佈局問題

所以這是一個網站，我把主機換一個非營利組織的圖片。

的圖片是在具有以下屬性的div：

position:absolute; right:50px; top:50px;

我想要做的是使文字更明顯，因爲在不同分辨率的圖片會在不同的位置，所以我可以：

-make文字在圖片

-or使文本避免DIV（如果可能）

可見

那麼，你們有什麼想法嗎？謝謝:)

來源

2010-07-19 PizzaPie

首先，不可能在絕對定位的div周圍流動文本，因爲它是從正常流程中取出的;看到http://www.w3.org/TR/CSS2/visuren.html#choose-position

你可以做的是使用以下屬性：

float: right; margin-right: 50px;

然後將其放置在正確的地方得到我，這應該達到什麼樣的你正在嘗試做的。如果你把它作爲第一個元素，你還可以添加，

margin-top: 50px;

希望有所幫助。

來源

2010-07-19 05:45:33

多數民衆贊成正是我正在尋找，我只是利用負邊緣，使其看起來更好，其結果我需要，thx這麼多 – PizzaPie 2010-07-19 07:24:58

使用這種風格也..這會讓你的PIC有點透明..at你想要的不透明度.. ，使文字更清晰。（如果文字不是事先知情同意的一部分）

opacity:0.4;filter:alpha(opacity=40)

來源

2010-07-19 05:44:07 PHP

可讀性問題不僅僅與您的背景圖像有關。儘量避免在藍色背景上使用藍色文本，這將有助於提高可讀性。此外，我會避免使用照片作爲背景的文字完全（相反，只是使照片的一部分內容）。但是，如果您不希望更改頁面的這一部分，我只會選擇較暗的背景並使用白色文本。

來源

2010-07-19 05:46:18

我會在文本下方添加一個RGBA背景，並且此區域將佔用大約。一半的圖片（上半部分或下半部分）。

以幻燈片形式顯示的文本以http://www.tenwhil.com/或http://airliquide.com/爲例。在後者中檢查IE6和IE7的條件註釋，其中篩選器用於那些不理解rgba()表示法的瀏覽器。 -ms-filter是在主樣式表，我不想創建一個IE8只是樣式表一個指令......

background-color: rgb(64,64,64); /* IE8 */ 
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=70)"; 
background-color: rgba(64,64,64, 0.7); /* recent browsers */ 

via conditional comment for IE<8 
background-color: rgb(64,64,64); 
filter: alpha(opacity:70);

編輯：
上述背景下的「小」文本的最糟糕的對比應該是4.5:1爲用Color Contrast Analyzer和3:1這樣的工具測量標題（14px粗體或18px正常，）

來源

2010-07-19 05:51:45 FelipeAls

使文本避免的div佈局問題

回答

相關問題