Question

我正在创建一个图库，其图片具有重叠的深色背景和标题文字。放置没有问题，但叠加div超出了图像的范围，因为在容器元素上使用了填充。

我在几个地方读过这篇文章，并了解到border-box可以解决这个问题，但事实并非如此。我在这里做错了吗？看看代码：

HTML：

<div class="dest-item">
 <img src="http://lorempixel.com/500/400">
  <div class="dest-caption">
    <div class="dest-text">
          <h3>This is a caption</h3>
    </div>
  </div>
</div>

CSS：

.dest-item{
    position:relative;
    overflow:hidden;
    z-index:1;
    padding:10px;
  width: 500px;
}

.dest-item img{
    width: 100%;
}

.dest-caption{
    position: absolute;
    top: 0px;
    background: rgba(0,0,0,0.2);
    z-index: 2;
    width: 100%;
    height: 100%;
  box-sizing: border-box;
}

.dest-text{
    position: absolute;
    bottom: 0;
    background: rgba(255,255,255,0.9);
    width: 100%;
    padding: 0px 10px;
}

游乐场链接：Code Pen

Answer 1

从整个dest-item div中删除填充。我认为你不需要在那边填充：

.dest-item {
  position: relative;
  overflow: hidden;
  z-index: 1;
  /* padding: 10px; */
  width: 500px;
}

Answer 2

试试这个（在这里分叉：http://codepen.io/anon/pen/RNqbjB）

CSS：

/*remove the padding*/
.dest-item{
    position:relative;
    overflow:hidden;
    z-index:1;
    padding:0px;
  width: 500px;
}

HTML：

<!--Add a wrapper and add the padding to that-->
    <div style="padding:10px;">
        <div class="dest-item">
            <img src="http://lorempixel.com/500/400">

            <div class="dest-caption">
                <div class="dest-text">
                  <h3>This is a caption</h3>
                </div>
            </div>
        </div>
    </div>

Answer 3

不确定这是否在右边？

.dest-item{
	position:relative;
	overflow:hidden;
	z-index:0;
	padding:10px;
    width: 500px;
}

.dest-item img{
	width: 100%;
}

.dest-caption{
	position: absolute;
	top: 0;
    left: 0;
	background: rgba(0,0,0,0.2);
	width: 100%;
	height: 100%;
}

.dest-text{
    color: black;
	position: absolute;
    text-shadow: 2px 2px 40px rgba(255,255,255, 1);
	bottom: 0;
    left: 0;
	background: rgba(255,255,255,0.38);
	width: 100%;
    padding: 2px 0px 10px 20px;
}

<div class="dest-item">
  	<img src="http://lorempixel.com/500/400">
  <div class="dest-caption">
    <div class="dest-text">
	      <h3>This is a caption</h3>
    </div>
  </div>
</div>

Answer 4

你不需要边框来做你想做的事。

有三种类型的盒子大小：

内容框是默认行为，仅包含宽度和高度。它不考虑填充或边框宽度。如果您有一个宽度为500px + 10px填充+ 1px边框的元素，则整个元素的显示大小为522px宽，实际内容的可用空间大小为500px。

padding-box 包含填充但不包含边框。与上面的示例相同，如果您使用的是填充框，则显示大小为502px，但可用内容空间为480px。

border-box 涵盖了所有内容。因此，在我们的示例中，显示大小为500px，但内容的可用空间为478px。

在任何情况下，边距都不会计入大小。

根据您希望最终结果的显示方式，您将以不同方式实现此目的，但基于您的Code Pen示例，您似乎想要填充整个项目容器，以便覆盖层也覆盖10px填充。您可以在不更改任何内容的大小调整的情况下执行此操作。

首先，您需要将.dest-caption元素向左偏移10px以考虑填充。然后，您需要添加10px填充并删除border-box属性。

像这样：

.dest-caption {
    position: absolute;
    top: 0px;
    left: -10px; /* offset */
    background: rgba(0,0,0,0.5);
    z-index: 2;
    width: 100%;
    height: 100%;
    padding: 10px; /* add padding */
}

修复后，您的文本及其框未对齐，并且框的大小未得到很好的控制。它受H3标签边缘的影响。通过从任何.dest-text元素中删除H3标记的边距来解决此问题：

.dest-text H3 {
    margin: 0px;
}

如果没有H3标签上的边距，文本叠加层实际上会从可绘制区域消失，因为它未对齐。你可以通过从.dest-caption填充宽度（x2）底部偏移.dest-text来解决这个问题。您可能还需要.dest-text的顶部和底部填充。

.dest-text {
    position: absolute;
    bottom: 20px; /* account for padding on .dest-caption */
    background: rgba(255,255,255,0.9);
    width: 100%;
    padding: 10px 10px; /* add top/bottom padding */
}

Code Pen Link

边框不工作，叠加div包括填充

4 个答案: