Question

我通常会使用create table test ( present_column NUMBER ); insert into test select rownum * 10 from dual connect by rownum <= 5; declare l_rc SYS_REFCURSOR; begin BEGIN OPEN l_rc FOR 'SELECT missing_column FROM test'; EXCEPTION WHEN others THEN OPEN l_rc FOR 'SELECT present_column FROM test'; END; -- This next only works in 12c and later -- In earlier versions, you've got to process l_rc on your own. DBMS_SQL.RETURN_RESULT(l_rc); end;将背景图像居中。

background-size: cover

然而，在这种情况下，我需要从顶部偏移背景图像，使其低100px。

原因是我在父div上使用负上边距但我希望背景保持原样。

正如您将从下面的代码段中看到的那样，div（红色）被拉起，然后背景图像再次被推回。

＆＃13;

.centered image {
    background: transparent url(my-image.jpg) no-repeat center center;
    background-size: cover;
}

＆＃13;

.section1 {
  height: 200px;
  background-color: lime;
}

.section2 {
  min-height: 200px;
  margin: -100px 50px 0 50px;
  background-color: red;
  background-image: url("https://thumb.ibb.co/f1inv8/Adobe_Stock_96159207_Preview.jpg");
  background-position: center 100px;
  background-repeat: no-repeat;
  background-size: cover;
}

＆＃13;

但是，如果我以这种方式使用背景位置，我就无法在y轴上正确居中。它似乎默认为顶部。

我真正想做的是对齐背景框，然后将背景集中在那里。

任何人都对如何实现这一点有任何想法？

Answer 1

你可以计算背景垂直位置从中心减去50px（100px的一半）

＆＃13;

.section1 {
  height: 200px;
  background-color: lime;
}

.section2 {
  min-height: 200px;
  margin: -100px 50px 0 50px;
  background-color: red;
  background-image: url("https://thumb.ibb.co/f1inv8/Adobe_Stock_96159207_Preview.jpg");
  background-position: center calc(50% - 50px);
  background-repeat: no-repeat;
  background-size: cover;
}

＆＃13;

<div class="section1">
</div>
<div class="section2">
</div>

＆＃13;

Answer 2

我会尝试给你一个更明确的例子，说明发生了什么。

我们将有一个div，我们将在该div中使用img标记来模仿背景。

div基本上是一个溢出的元素：隐藏为背景，我的意思是通常当你设置溢出：隐藏在元素上时，如果它的内容大于它，它只是隐藏了什么＆＃ 39;在外面。

背景然而不是，但它有溢出属性被隐藏，所以如果背景更大，它只是被剪切，直到你用背景大小调整大小：100％100％;使它适合两个轴。

示例

＆＃13;
＆＃13;
div { width: 100px; height: 100px; /* to mimic the img being cut of, if it's larger*/ overflow: hidden; border: 1px solid; /* to have a visual understanding*/ } .test { background: url('https://thumb.ibb.co/f1inv8/Adobe_Stock_96159207_Preview.jpg'); }
＆＃13;
<div class="element"> <img src="https://thumb.ibb.co/f1inv8/Adobe_Stock_96159207_Preview.jpg" class="background"> </div> <div class="test"></div>
＆＃13;
＆＃13;
＆＃13;

我希望你现在明白发生了什么。

因此，使用<img>来实现您想要的功能非常简单。

＆＃13;
＆＃13;
* { margin: 0; padding: 0; box-sizing: border-box; } .section1 { height: 200px; background-color: lime; } .section2 { height: 200px; margin: -100px 50px 0 50px; background-color: red; } .section2>img { margin-top: 100px; object-fit: cover; width: 100%; max-height: 100%; }
＆＃13;
<div class="section1"> </div> <div class="section2"> <img src="https://thumb.ibb.co/f1inv8/Adobe_Stock_96159207_Preview.jpg"> </div>
＆＃13;
＆＃13;
＆＃13;

这不是你正在寻找的东西，推动div向上但背景仍然保持原样吗？使用flex可以完善它，但我会告诉你。

偏移背景图像并集中定位

2 个答案: