Question

这意味着在图像内部，但在右侧部分。图像在屏幕上。文本应该在正确的部分。

到目前为止，我的代码是这样的：

＆＃13;

.banner{
   width:100%;
   background-image: url(../img/kepmerli2.jpg); 
   background-repeat: no-repeat;
   background-size: 100%; 
   background-position: 65% 35% ;   
   padding-top: 200px;

}

.herotext{
    bottom: 20px;
    font-family: 'museo_slab500';
    font-size: 150%;
    color: #fff;
    padding: 0 20px;
    width: 40%;
    line-height: 150%;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7); 
}

＆＃13;

<div class=" continer banner">
   <div class="herotext">
      <h3 >Marine Vila</h3>
      <p>This is Kep Merli Marine Villa, </br>  a living space redeffing design tandarts in Albania </p> 
   </div> 
</div>

＆＃13;

Answer 1

将text-align: right;添加到.banner

＆＃13;

.banner{
    width:100%;

   background-image: url(../img/kepmerli2.jpg); 
   background-repeat: no-repeat;
   background-size: 100%; 
   background-position: 65% 35% ;   
   padding-top: 200px;
   text-align:right;

}

.herotext{

 
    bottom: 20px;
    font-family: 'museo_slab500';
    font-size: 150%;
    color: #fff;
    padding: 0 20px;
    width: 40%;
    line-height: 150%;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7); 
    

}

＆＃13;

<div class=" continer banner">
   <div class="herotext"> 

      <h3 >Marine Vila</h3>
      <p>This is Kep Merli Marine Villa, </br>  a living space redeffing design tandarts in Albania </p> 
     </div> 
   </div>

＆＃13;

Answer 2

将text-align: right;应用于banner。

http://jsfiddle.net/5y6v1o35/

Answer 3

将text-align: right;和float: right;添加到herotext： http://jsfiddle.net/yeyp7sfk/1/

Answer 4

将以下内容添加到.herotext：

position:fixed;
right:0px;
top:0px;

使用top进行游戏以正确定位。

Answer 5

试试这个：http://jsfiddle.net/Lxrsmj25/

<div class=" continer banner">
   <div class="herotext"> 

      <h3 >Marine Vila</h3>
      <p>This is Kep Merli Marine Villa, </br>  a living space redeffing design tandarts in Albania </p> 
     </div> 
   </div>.banner {
    background-image: url("http://d.fastcompany.net/multisite_files/fastcompany/imagecache/1280/poster/2013/09/3017047-poster-1280-google.jpg");
    float: left;
    height: 400px;
    width: 100%;
}

.herotext {
    background: none repeat scroll 0 0 rgba(0, 0, 0, 0.7);
    bottom: 20px;
    color: #fff;
    float: right;
    font-family: "museo_slab500"; 
    line-height: 50%;
    padding: 0 20px;
    position: absolute;
    right: 0;
    top: 0;
    height:150px;
    width: 40%;
}

Answer 6

尝试更新 JSFIDDLE

.banner{
   width:100%;
   background-image: url(http://www.crazymonkeydefense.com/wp-content/uploads/2014/03/black-hd-background-background-wallpapers-abstract-photo-cool-black-background.jpg); 
   background-repeat: no-repeat;
   background-size: 100%; 
   background-position: 65% 35% ;   
   padding-top: 200px;
   overflow: hidden;
}

.herotext{
    float: right;
    font-family: 'museo_slab500';
    font-size: 150%;
    color: #fff;
    padding: 0 10px;
    width: 40%;
    line-height: 150%;
    background: rgb(0, 0, 0);
    background: rgba(0, 0, 0, 0.7);
}

如果您想正确对齐文字，请添加text-align: right;

如何在图像右侧放置文本？

6 个答案: