使文本避免出现 div、布局问题答案

【问题标题】：Make text avoid a div, layout question使文本避免出现 div、布局问题
【发布时间】：2010-07-19 05:36:49
【问题描述】：

Here 是一张照片

所以这是我为非营利组织托管的网站的图片。

图片位于具有以下属性的 div 中：

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

我想要做的是使文本更明显，因为在不同的分辨率下，图片将位于不同的位置，所以我可以：

-使文字在图片上可见

-或使文本避开 div（如果可能）

那么，你们有什么想法吗？谢谢:)

【问题讨论】：

标签： html css text layout

【解决方案1】：

首先，在绝对定位的 div 周围排列文本是不可能的，因为它脱离了正常的排列方式；见http://www.w3.org/TR/CSS2/visuren.html#choose-position

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

float: right; margin-right: 50px;

然后将它放在正确的位置以获取 i，这应该可以实现您想要做的事情。如果您将其作为中的第一个元素，您还可以添加，

margin-top: 50px;

希望对您有所帮助。

【讨论】：

这正是我想要的，我只是使用负边距让它看起来更好，这是我需要的结果，非常感谢

【解决方案2】：

也使用这种风格..这将使您的图片有点透明..您想要什么不透明度.. 并使文字更清晰..（如果文字不是图片的一部分）

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

【讨论】：

【解决方案3】：

可读性问题不仅仅在于您的背景图片。尽量避免在蓝色背景上使用蓝色文本，这将有助于提高可读性。

另外，我会完全避免使用照片作为文本的背景（相反，只需将照片作为内容的一部分）。但是，如果您不想更改页面的那部分，我会简单地使用较暗的背景并使用白色文本。

【讨论】：

【解决方案4】：

我会在文本下方添加一个 RGBA 背景，这个区域将占据大约图片的一半（下半部分或上半部分）。

以http://www.tenwhil.com/ 或http://airliquide.com/ 中的幻灯片显示文本为例。在后者中检查 IE6 和 IE7 的条件 cmets，其中过滤器用于那些不理解 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 正常）

【讨论】：