Question

Here是一张图片

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

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

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

我想要做的是让文字更加醒目，因为在不同的分辨率下，图片将位于不同的位置，所以我可以：

- 在图片上显示文字

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

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

Answer 1

首先，不可能在绝对定位的div周围流动文本，因为它是从正常流程中取出的;见http://www.w3.org/TR/CSS2/visuren.html#choose-position

您可以使用以下属性：

float: right; margin-right: 50px;

然后将它放在正确的位置以获得我，这应该达到你想要做的。如果你把它作为第一个元素，你也可以添加，

margin-top: 50px;

希望有所帮助。

Answer 2

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

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

Answer 3

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

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

Answer 4

我会在文本下面添加一个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正常，约。）

使文本避免div，布局问题

4 个答案: