[英]how do I position text on the right of an image?
这意味着在图像内部但在右侧部分。 图像在屏幕上。 文本应在右侧。
到目前为止,我的代码是这样的:
.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); }
<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>
添加text-align: right;
到.banner
.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); }
<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>
套用text-align: right;
到banner
。
添加text-align: right;
float: right;
到Herotext: http : //jsfiddle.net/yeyp7sfk/1/
在.herotext中添加以下内容:
position:fixed;
right:0px;
top:0px;
向上游动以正确放置它。
试试这个: 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%;
}
试试这个更新的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;
如果要右对齐
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.