gpt4 book ai didi

css - 在背景图像上放置文本的技巧

转载 作者:行者123 更新时间:2023-11-28 10:44:08 26 4
gpt4 key购买 nike

看看这个网站http://startbootstrap.com/templates/grayscale/介绍性文本放置在背景图像上的位置。在这种情况下 - 他们使用表格来显示文本

.intro {
显示:表格;
宽度:100%;
高度:自动;
填充:100px 0;
文本对齐:居中;
颜色:#fff;
背景:url(../img/bg.jpg) 无重复底部中心滚动;
背景色:#000;
-webkit-背景大小:覆盖;
-moz-背景大小:封面;
背景尺寸:封面;
-o-背景尺寸:覆盖;
}

当然,实现此目标的另一种方法是使用绝对定位,但采用移动优先的方法 - 我很想知道什么是最轻量级的解决方案(最少的 css),同时保持最佳实践!

最佳答案

我猜是背景:url 样式是它的症结所在。不过,您可以在 DIV 上使用它。其余样式仅与 div 本身有关(文本颜色/div 大小)。

这是一个极简主义的例子 - 这在我的 Android 手机上运行良好:

<html>
<head>
<style type="text/css">
div {
background: url(http://www.thewebbery.co.uk/Web04/SKP/Files/PITP1.jpg);
color:#FFFFFF;
width:900;
height:600;
}
</style>

</head>
<body>
<div>
Here's some text over an image
Some more over an image Here's some text over an image
Some more over an image Here's some text over an image
Some more over an image Here's some text over an image
Some more over an image Here's some text over an image
Some more over an image Here's some text over an image
Some more over an image

</div>
</body>
</head>

关于css - 在背景图像上放置文本的技巧,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/23057117/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com