文本位置固定在图像上

Question

我有这个样本：

link

.header{
    background-image:url("http://orange.motorcitynewengland.com/img/bg/jeep-renegade.jpg");
    width:1920px;
    height:616px;
    background-size:contain;
}
span{
  font-size: 21px;
    color: white;
    position: absolute;
    left: 56%;
    transform: rotate(33deg);
    top: 86px;
}

<div class="header">
   <span>Low mileage</span>
</div>

我想把文字放在蓝色上。 问题是，如果您调整浏览器的大小，文本就会出错。

无论浏览器大小如何，我都希望保持元素位置。 你能告诉我怎么做吗？

提前致谢！

Answer 1

您必须将单位从％更改为 px left: 650px

CSS代码：

 .header{
        background-image:url("http://orange.motorcitynewengland.com/img/bg/jeep-renegade.jpg");
        width:1920px;
        height:616px;
        background-size:contain;
    }
    span{
      font-size: 21px;
        color: white;
        position: absolute;
        left: 650px;
        transform: rotate(33deg);
        top: 86px;
    }

Working Demo

Answer 2

＆＃13;

＆＃13;

.header{
    background-image:url("http://orange.motorcitynewengland.com/img/bg/jeep-renegade.jpg");
    width:1920px;
    height:616px;
    background-size:contain;
 
}
span{
  font-size: 19px;
    color: white;
    position: absolute;
   left: 105%;
    transform: rotate(33deg);
    top: 10%;
 
  

}

＆＃13;

<div class="header">
   <span>Low mileage</span>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

如果内部元素是绝对的，外部元素必须相对于外部元素的相对位置。

Session session = Session.getDefaultInstance(props,new javax.mail.Authenticator() {  
        protected PasswordAuthentication getPasswordAuthentication() {  
            return new PasswordAuthentication("FROM","PASSWORD");  
        }  
    });
Transport transport = session.getTransport("smtp");
transport.connect();
try{
   for(Message m : messages) {
   transport.sendMessage(m, m.getAllRecipients()); // time decreased to 2 second/message
   }
}finally {
t.close();
}

.header{
    background-image:url("http://orange.motorcitynewengland.com/img/bg/jeep-renegade.jpg");
    width:1920px;
    height:616px;
    background-size:contain;
    position: relative;

}
span{
    font-size: 21px;
    color: white;
    position: absolute;
    left: 56%;
    transform: rotate(33deg);
    top: 86px;
}