Question

我想在div中放置2张图像作为背景图像。

这是我放的代码，但我只看到第二张图片。

#wrap-header {
  max-width: 100%;
  height: 400px;
  background-image: url("../assets/header_background.png"), url("../assets/circle_header_background.png");
  background-repeat: no-repeat;
  background-position: center bottom, center top;
}

<div id="wrap-header">

</div>

我想要检索一个图像在另一个图像下的效果，或者一个图像作为第一个图层，第二个图像作为第一个图层。

我找不到办法。你可以帮助我吗？

Answer 1

您可以使用CSS选择器：在之后和：之前

首先，将以下内容添加到＃wrap-header：

#wrap-header {
    position: relative;
    overflow: hidden;
    max-width: 100%;
    height: 400px;
}

然后使用选择器：

#wrap-header:before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    height: 50%;
    width: 100%;
    background-image: url('image1');
    background-repeat: no-repeat;
    background-position: center
}

#wrap-header:after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    height: 50%;
    width: 100%;
    background-image: url('image2');
    background-repeat: no-repeat;
    background-position: center;
}

Answer 2

您可以使用background-size: 100% 50%执行此操作，其中100%的第一个值表示图像的宽度 ，第二个是 height ，设置为50%或总是#wrap-header height的一半：

＆＃13;

#wrap-header {
  /*max-width: 100%; by default*/
  height: 400px;
  background-image: url('https://placeimg.com/1600/200/any'), url('https://placeimg.com/1600/201/any');
  background-repeat: no-repeat;
  background-position: bottom, top;
  background-size: 100% 50%;
}

＆＃13;

<div id="wrap-header"></div>

＆＃13;

Answer 3

这可以通过伪元素的帮助来完成：在

之前和之后

#wrap-header {
  max-width: 100%;
  height: 400px;
}

#wrap-header:before {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("https://boutiqueme.com/static/4/generated/30-pattern-44-ff81c0.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 2;
}

#wrap-header:after {
  content: "";
  width: 100%;
  height: 100%;
  background-image: url("https://cdn.pixabay.com/photo/2016/04/12/00/04/hero-1323464_960_720.png");
  background-repeat: no-repeat;
  background-size: cover;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

<div id="wrap-header">

</div>

Answer 4

您可以使用if (isset($_SERVER['HTTP_ORIGIN'])){ header("Access-Control-Allow-Origin: {$_SERVER['HTTP_ORIGIN']}"); header('Access-Control-Allow-Credentials: true'); header('Access-Control-Max-Age: 86400'); // cache for 1 day } // Access-Control headers are received during OPTIONS requests if ($_SERVER['REQUEST_METHOD'] == 'OPTIONS') { if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_METHOD'])) header("Access-Control-Allow-Methods: GET, POST,OPTIONS"); if (isset($_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS'])) header("Access-Control-Allow-Headers: {$_SERVER['HTTP_ACCESS_CONTROL_REQUEST_HEADERS']}"); exit(0); }和:before :after选择器来实现此目标

＆＃13;

pseudo

＆＃13;

/* Set #wrap-header to relative so that :before and :after does not goes outside */
#wrap-header {
  max-width: 100%;
  height: 400px;
  position: relative;
}

#wrap-header:before,
#wrap-header:after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  top: 0;
}

/* Set First Background Image */
#wrap-header:before {
  background: url("http://via.placeholder.com/850x450") center bottom no-repeat;
}

/* Set Second Background Image */
#wrap-header:after {
  background: url("http://via.placeholder.com/900x450") center top no-repeat;  
  opacity: 0.3; /* Set transparency as per your requirement */
}

＆＃13;

在div中对齐背景中的2个图像

4 个答案: