求css大神帮忙修改下

qingwadaxia_1 2018-01-01 01:48:27
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" name="viewport">
<title>Document</title>
<style>
*{margin:0;padding:0;}
img{width: 100%;}
.header1{position: relative;max-width:640px;margin:0 auto;}
.header1 p {
position: absolute;
top: 44%;
left: 18%;
font-size: 14px;
width: 60%;
text-indent: 2em;
}
</style>
</head>
<body>
<div class="header1"><img src="http://www.ncwseo.com/images/1.jpg">
<p>新春即将到来,新的乐章已经奏响。希望在新春到来之际,我们能够与你继续携手前行,为你的生活保驾护航! </p>
</div>
</body>
</html>


上面是在背景图片上写了一些文字,我想让那段文字在背景图片的空白区域,在各个模拟尺寸下都上下左右居中对齐,文字大小自动适应各种尺寸,请问如何去改

...全文
522 4 打赏 收藏 转发到动态 举报
写回复
用AI写文章
4 条回复
切换为时间正序
请发表友善的回复…
发表回复
zoujiawei6 2018-01-02
  • 打赏
  • 举报
回复
固定宽和高,溢出隐藏,这样值就能精确计算了:

.header1 p {
    position: absolute;
    width: 60%;
    height: 17%;
    top: 41.5%;
    left: 20%;
    font-size: 14px;
    text-indent: 2em;
    overflow: hidden;
}
1、这个图片大小变化就会失效。 2、有时候必须涉及到boder(边框)大小问题,也就是说你还得减去边框。 如果你保证,图片大小不变、无边框、文字固定。这样就没问题了。 相对定位,想要灵活的话,就得用js。
qingwadaxia_1 2018-01-01
  • 打赏
  • 举报
回复
引用 2 楼 jslang 的回复:

*{margin:0;padding:0;}
img{width: 100%;}
.header1{position: relative;max-width:640px;margin:0 auto;}
.header1 p {
    position: absolute;
    border: 1px solid #999;
    top: 23%;
    left: 20%;
    font-size: 4vw;
    line-height: 120%;
    width: 60%;
    text-indent: 2em;
}
@media screen and (min-width: 640px) {
	.header1 p {
	    font-size: 25px;
	}
)

font-size: 4vw; line-height: 120%; 请问大神 这两个数据是如何得出来的, 另外 top: 23%; left: 20%; width: 60%; 这三个数据都是我肉眼观察居中, 有什么比较好的方法吗 还有不是应该用em 或者rem吗
天际的海浪 2018-01-01
  • 打赏
  • 举报
回复

*{margin:0;padding:0;}
img{width: 100%;}
.header1{position: relative;max-width:640px;margin:0 auto;}
.header1 p {
    position: absolute;
    border: 1px solid #999;
    top: 23%;
    left: 20%;
    font-size: 4vw;
    line-height: 120%;
    width: 60%;
    text-indent: 2em;
}
@media screen and (min-width: 640px) {
	.header1 p {
	    font-size: 25px;
	}
)

qingwadaxia_1 2018-01-01
  • 打赏
  • 举报
回复
没有人能解答吗。。。

61,110

社区成员

发帖
与我相关
我的任务
社区描述
层叠样式表(英文全称:Cascading Style Sheets)是一种用来表现HTML(标准通用标记语言的一个应用)或XML(标准通用标记语言的一个子集)等文件样式的计算机语言。
社区管理员
  • HTML(CSS)社区
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧