61,110
社区成员
发帖
与我相关
我的任务
分享
.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。
*{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;
}
)