0

我正在创建一个带有覆盖深色背景和标题文本的图像的画廊。位置没问题，但覆盖 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;
}

游乐场链接：代码笔

4

4 回答 4

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>
于 2015-03-14T12:14:46.070 回答
1

从整个dest-itemdiv 中删除填充。我认为你不需要那里的填充物：

.dest-item {
  position: relative;
  overflow: hidden;
  z-index: 1;
  /* padding: 10px; */
  width: 500px;
}
于 2015-03-14T11:32:31.947 回答
0

不确定这是否正确？

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

于 2015-03-14T12:13:38.333 回答
0

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

有 3 种类型的 box-sizing：

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

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

边框框涵盖了所有内容。因此，在我们的示例中，显示大小为 500 像素，但内容的可用空间为 478 像素。

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

根据您希望最终结果的外观，您将以不同的方式实现此目的，但根据您的 Code Pen 示例，您似乎想要填充整个项目容器，因此覆盖层也覆盖了 10px 填充。你可以在不改变任何东西的盒子大小的情况下做到这一点。

首先，您需要将 .dest-caption 元素向左偏移 10px 以考虑填充。然后你需要添加 10px 的 padding 并移除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-text 从底部偏移 .dest-caption 填充宽度 (x2) 来解决此问题。您可能还需要 .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 */
}

代码笔链接

于 2015-03-14T12:32:17.410 回答