遮罩内容并排获取图像高度

我有一些行在左列中包含图像，在右列中包含一些文本。该图像的比例为16：9。当文本变长，我要屏蔽带有渐变的文本，并显示“更多”（向右当前布局的左侧，想布局），如下面所示按钮：遮罩内容并排获取图像高度

通过引导4，α-6.

.bg-gray-950 { 
 
    background-color: #fafafa; 
 
} 
 

 
.bg-gradient-red-green { 
 
    background: linear-gradient(45deg, #4cad9e, #b34b4b); 
 
    color: #fff; 
 
} 
 

 
.img-overlay { 
 
    width: 100%; 
 
    height: 100%; 
 
    &:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-image: linear-gradient(to bottom right, #000000, #dc4425); 
 
    opacity: .3; 
 
    } 
 
} 
 

 
body { 
 
    min-height: 100vh; 
 
    background: rgba(33, 66, 99, 0.8); 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 

 
<div class="container m-5"> 
 
    <div class="row bg-gray-950 d-flex"> 
 
    <div class="col-md-6 p-0 img-overlay"> 
 
     <img src="https://losol.no/wp-content/uploads/2017/06/20170502-2054-hovland-05091.jpg" class="img-fluid"> 
 
    </div> 
 
    <div class="col-md-6 "> 
 
     <div class="card-block"> 
 
     <h4 class="card-title">Lorem hipster dolor ipsum sit amet</h4> 
 
     <p class="card-text">Dreamcatcher kombucha drinking vinegar cold-pressed hoodie craft beer literally blog microdosing trust organic flannel blue bottle fingerstache. Blog skateboard cronut chips brunch pug. Heirloom coloring book, pitchfork flannel bicycle rights 
 
      deep v meditation. </p> 
 
     <a href="#" class="btn btn-outline-primary rounded-0"><i class="fa fa-share" aria-hidden="true"></i> Read more</a> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-06-28 Ole Kristian Losvik

您的代码段不能正常工作 –

对不起，现予以更正。 –

请注意，这是一个不完整的答案。这只是为了涵盖文本的透明度，而不是内容的适合性。你的示例代码是不完整的

我能够加入到达到预期的效果：

-webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1))

到文本类。

好又简单吧？否。

这不会在IE or Edge上工作，但仍然... 89％的支持不是太破旧。

.bg-gray-950 { 
 
    background-color: #fafafa; 
 
} 
 

 
.bg-gradient-red-green { 
 
    background: linear-gradient(45deg, #4cad9e, #b34b4b); 
 
    color: #fff; 
 
} 
 

 
.img-overlay { 
 
    width: 100%; 
 
    height: 100%; 
 
    &:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-image: linear-gradient(to bottom right, #000000, #dc4425); 
 
    opacity: .3; 
 
    } 
 
} 
 

 
body { 
 
    min-height: 100vh; 
 
    background: #5f514c !important; 
 
} 
 

 

 

 
.card-text { 
 
    -webkit-mask-image: linear-gradient(to top, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1)); 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 

 
<body> 
 
    <div class="container m-5"> 
 
    <div class="row bg-gray-950 d-flex"> 
 
     <div class="col-md-6 p-0 img-overlay"> 
 
     <img src="https://losol.no/wp-content/uploads/2017/06/20170502-2054-hovland-05091.jpg" class="img-fluid"> 
 
     </div> 
 
     <div class="col-md-6 "> 
 
     <div class="card-block"> 
 
      <h4 class="card-title">Lorem hipster dolor ipsum sit amet</h4> 
 
      <p class="card-text">Lorem ipsum dolor sit amet, reque urbanitas est at. Graeci eloquentiam nam ad. Vix ut laudem aperiam accumsan, ut illum ubique feugait mel, munere incorrupte usu eu. At his cibo suscipit. His ex nobis scaevola. 
 
Qui ex mundi inimicus iracundia. Ne eruditi noluisse est, mei unum apeirian te, mucius accusata ne qui. Aliquid ancillae conceptam sed ex. Ius semper aperiri te</p> 
 
      <a href="#" class="btn btn-outline-primary rounded-0"><i class="fa fa-share" aria-hidden="true"></i> Read more</a> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</body>

来源

2017-06-28 12:55:28

你想要做的是首先确保持有文本的div与图像高度相同。你可以通过给它高度：0和填充顶部：56.25％; （强制16：9的比例）。下一步是将按钮放在一个div中，该div也包含渐变并将其绝对定位在div的底部。

我在这里把一个快速和肮脏的演示：

.wrapper { 
 
    width: 1280px; 
 
    margin: auto; 
 
} 
 

 
.wrapper > img { 
 
    float: left; 
 
} 
 

 
.textdiv { 
 
    width: 640px; 
 
    float: left; 
 
    font-size: 20px; 
 
    overflow: hidden; 
 
} 
 

 
.textdiv__inner { 
 
    position: relative; 
 
    width: 100%; 
 
    height: 0; 
 
    padding-top: 56.25%; 
 
} 
 

 
.text { 
 
    position: absolute; 
 
    top: 0; 
 
    
 
} 
 

 
.button-wrapper { 
 
    position: absolute; 
 
    bottom: 0; 
 
    padding: 50px 0 10px; 
 
    width: 100%; 
 
    text-align: center; 
 
    background: linear-gradient(rgba(0,0,0,0.0) 0%, #fff 50%, #fff 100%); 
 
}

<div class="wrapper"> 
 
    <img src="http://via.placeholder.com/640x360" alt="" /> 
 
    <div class="textdiv"> 
 
    <div class="textdiv__inner"> 
 
     <p class="text"> 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos sint nesciunt temporibus accusamus dicta eum soluta, distinctio, aspernatur iste adipisci praesentium, quae vitae molestiae non, quasi eligendi laborum deleniti ratione! 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos sint nesciunt temporibus accusamus dicta eum soluta, distinctio, aspernatur iste adipisci praesentium, quae vitae molestiae non, quasi eligendi laborum deleniti ratione! 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos sint nesciunt temporibus accusamus dicta eum soluta, distinctio, aspernatur iste adipisci praesentium, quae vitae molestiae non, quasi eligendi laborum deleniti ratione! 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos sint nesciunt temporibus accusamus dicta eum soluta, distinctio, aspernatur iste adipisci praesentium, quae vitae molestiae non, quasi eligendi laborum deleniti ratione! 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos sint nesciunt temporibus accusamus dicta eum soluta, distinctio, aspernatur iste adipisci praesentium, quae vitae molestiae non, quasi eligendi laborum deleniti ratione! 
 
     Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dignissimos sint nesciunt temporibus accusamus dicta eum soluta, distinctio, aspernatur iste adipisci praesentium, quae vitae molestiae non, quasi eligendi laborum deleniti ratione! 
 
     </p> 
 
     <div class="button-wrapper"> 
 
     <button>read more</button> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</div>

来源

2017-06-28 12:32:24

感谢您的帮助！这是“最终”代码，只是发布它，以防其他人使用Google代码。


 

 
.bg-gradient-wipe { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    height: 100%; 
 
    width: 100%; 
 
    background: -webkit-linear-gradient(transparent 50%, #fff 75%); 
 
    background: linear-gradient(transparent 50%, #fff 75%); 
 
} 
 

 
.btn-fixed-bottom { 
 
    position: absolute; 
 
    bottom: 10px; 
 
} 
 

 
.bg-gray-950 { 
 
    background-color: #fafafa; 
 
} 
 

 
.img-overlay { 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
.img-overlay:before { 
 
    content: ''; 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    background-image: -webkit-linear-gradient(top left, #000000, #dc4425); 
 
    background-image: linear-gradient(to bottom right, #000000, #dc4425); 
 
    opacity: .3; 
 
} 
 

 
body { 
 
    min-height: 100vh; 
 
    background: #336699!important; 
 
}

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous"> 
 
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script> 
 
<body> 
 
<div class="container m-5"> 
 
    <div class="row bg-gray-950 d-flex"> 
 
    <div class="col-md-6 p-0 img-overlay"> 
 
     <img src="https://losol.no/wp-content/uploads/2017/06/20170502-2054-hovland-05091.jpg" class="img-fluid"> 
 
    </div> 
 
    <div class="col-md-6 embed-responsive embed-responsive-16by9"> 
 
     <div class="embed-responsive-item p-3"> 
 
     <div class="bg-gradient-wipe"></div> 
 
     <h4>Lorem hipster dolor ipsum sit amet</h4> 
 
     <p>Dreamcatcher kombucha drinking vinegar cold-pressed hoodie craft beer literally blog microdosing trust organic flannel blue bottle fingerstache. Blog skateboard cronut chips brunch pug. Heirloom coloring book, pitchfork flannel bicycle rights deep v meditation. </p> 
 

 
     <a href="#" class="btn btn-fixed-bottom btn-outline-primary rounded-0"><i class="fa fa-share" aria-hidden="true"></i> Read more</a> 
 

 
     </div> 
 
    </div> 
 
    </div> 
 
</div> 
 
</body>

来源

2017-06-28 13:43:16

这甚至没有看起来像接受的答案一样...和你的图像样本？ – LGSon

对不起，我忘了链接到引导css/js。现在看起来不错。 –

遮罩内容并排获取图像高度

回答

相关问题