Question

我已经完成了我的css分享，并且认为我知道所有常用的技巧，但是这个难倒我。我试图将一个标题框绝对放在图像上（实现为背景图像），并附带一系列要求：

应该居中
最大宽度和最大高度应为图像的百分比。
应该从父级获得最低10％，并使用更多内容调整大小
应隐藏超过最大尺寸的文字内容，但带有圆角border-radius角的背景应保持可见。

以下是我最接近的 - 它在中心位置失败：

＆＃13;

.container {
  background-image: url('http://via.placeholder.com/400x400');
  height: 400px;
  width: 400px;
  position: relative;
}

.caption {
  position: absolute;
  bottom: 10%;
  margin: 0 auto;
  max-width: 75%;
  max-height: 25%;
  overflow: hidden;

  box-sizing: border-box;
  background-color: rgba(75,75,75,0.4);
  border-radius: 5px;
  padding: 10px;
  text-align: center;
  color: white;
}

＆＃13;

<div class="container">
  <div class="caption">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
  </div>
</div>

＆＃13;

我知道很多方法可以集中，但我没有尝试维持其他要求。

如果它实现了我的所有目标，我不介意在.caption周围包裹一个或多个额外元素。有人能帮忙吗？提前谢谢。

Answer 1

使用您需要的尺寸和位置将标题包裹在另一个div中。

＆＃13;

.container {
  background-image: url('http://via.placeholder.com/400x400');
  height: 400px;
  width: 400px;
  position: relative;
  margin: 1em auto;
}

.wrap {
  width: 75%;
  max-height: 80%;
  position: absolute;
  transform: translateX(-50%);
  bottom: 10%;
  border-radius: 5px;
  left: 50%;
  overflow: hidden;
}

.caption {
  box-sizing: border-box;
  background-color: rgba(75, 75, 75, 0.4);
  padding: 10px;
  text-align: center;
  color: white;
}

＆＃13;

<div class="container">
  <div class="wrap">
    <div class="caption">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation </p>
    </div>
  </div>
</div>

<div class="container">
  <div class="wrap">
    <div class="caption">
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor
        in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing
        elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
        cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    </div>
  </div>
</div>

＆＃13;

Answer 2

将function link(scope, element, attrs, modelCtrl){ modelCtrl.$parsers.push(function(inputValue) { if (inputValue === undefined) return ''; var cleanInputValue = inputValue.replace('.', '') .replace(/[^0-9.]/g, '') .replace(/\./, "x") .replace(/\./g, "") .replace(/x/, "."); if (cleanInputValue != inputValue) { modelCtrl.$setViewValue(cleanInputValue); modelCtrl.$render(); } return cleanInputValue; }) }和left:0px添加到right:0px

.caption

.container {
  background-image: url('http://via.placeholder.com/400x400');
  height: 400px;
  width: 400px;
  position: relative;
}

.caption {
  position: absolute;
  bottom: 10%;
  margin: 0 auto;
  max-width: 75%;
  max-height: 25%;
  overflow: hidden;
  left: 0px;
  right: 0px;
  box-sizing: border-box;
  background-color: rgba(75,75,75,0.4);
  border-radius: 5px;
  padding: 10px;
  text-align: center;
  color: white;
}

css组合绝对定位，最大尺寸和居中的麻烦

2 个答案: