屏蔽内容以并排获取图像的高度
我有一些行包含左列中的图像，右侧列中包含一些文本。图像的比例为16：9。当文本变长时，我想用渐变来掩盖文本，并显示＆＃34;阅读更多＆＃34;按钮如下所示（当前布局在左侧，想要的布局在右侧）：
使用Bootstrap 4，alpha 6.
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.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>
3 个答案:
答案 0 :(得分：1)
您要做的是首先确保包含文本的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>
答案 1 :(得分：1)
请注意，这是一个不完整的答案。这只是为了涵盖文本的透明度而不是内容的拟合。您的示例代码不完整
我可以通过添加：
来达到预期的效果-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>
答案 2 :(得分：0)
感谢您的帮助！这是＆＃34; final＆＃34;代码，只是发布它以防其他人谷歌搜索它。
＆＃13;
＆＃13;
＆＃13;
＆＃13;
.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>
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？