个人中心
gpt4 book ai didi

html - 屏蔽内容以并排获取图像的高度

转载 作者：太空宇宙 更新时间：2023-11-04 01:44:34 27 4
gpt4 key购买 nike

我有一些行在左列中包含图像，在右列中包含一些文本。图像的比例为 16:9。当文本变长时，我想用渐变遮盖文本，并显示“阅读更多”按钮，如下所示(当前布局在左边，想要的布局在右边):

Demo image

使用 Bootstrap 4，alpha 6。

Codepen 

.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>

最佳答案

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

我可以通过添加来达到预期的效果:

-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>

关于html - 屏蔽内容以并排获取图像的高度，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44802287/

27 4 0
文章推荐： node.js - 在 mongodb 对象点表示法中使用变量
文章推荐： javascript - npm install 和meteor npm install 有什么区别
文章推荐： Mongodb 对内部数组进行排序
文章推荐： IIS下的Python FastCGI-stdout写入问题
太空宇宙
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com