主页 / coding / 问题 / 76994301
Accepted
alex
Asked: 2023-08-28 23:48:19 +0800 CST

使图像覆盖父div的轮廓

  • 772

我有一个带有偏移虚线轮廓的图像，因此它位于 div 内部。我的 div 内还有一个图像。我希望图像覆盖轮廓，但轮廓位于图像上方。

我怎样才能使图像位于轮廓之上？

:root {
    --background: #9376e0;
    --main: #f6ffa6;
    --accent: #e892cf;
}

body {
    background-color: var(--background);
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.contentbox {
    margin: 0 2rem;
    background-color: var(--main);

    box-shadow: 15px 15px var(--accent);
    border: 4px solid var(--accent);
    border-radius: 10px;
    border-top: 50px solid var(--accent);

    outline: 2px dashed var(--accent);
    outline-offset: -10px;

    padding: 20px 10px 15px 20px;
}

.titlebar {
    margin: -90px -300px 30px -10px;
    min-width: 100%;
}

.titlebar, .titlebar img {
    max-width: 100%;
}
<link href="/assets/external/bootstrap-5.0.2/css/bootstrap.min.css" rel="stylesheet">

<div class="col-lg-8 main">
  <div class="contentbox">
    <h1 class="titlebar">
      <img class="center" src="https://images.pexels.com/photos/255419/pexels-photo-255419.jpeg?cs=srgb&dl=pexels-pixabay-255419.jpg&fm=jpg">
    </h1>
  </div>
</div>

html

1 个回答

  1. Best Answer

    Amaury Hanser 给出了正确的答案，但为了能够接受您问题的答案，我将直接写下下面的完整代码。添加position: relative到 CSS 中的图像，它将位于轮廓的顶部。

    :root {
    --background: #9376e0;
    --main: #f6ffa6;
    --accent: #e892cf;
}

body {
    background-color: var(--background);
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
}

.contentbox {
    margin: 0 2rem;
    background-color: var(--main);

    box-shadow: 15px 15px var(--accent);
    border: 4px solid var(--accent);
    border-radius: 10px;
    border-top: 50px solid var(--accent);

    outline: 2px dashed var(--accent);
    outline-offset: -10px;

    padding: 20px 10px 15px 20px;
}

.titlebar {
    margin: -90px -300px 30px -10px;
    min-width: 100%;
}

.titlebar, .titlebar img {
    max-width: 100%;
}

.titlebar img {
    position: relative;
}
    <link href="/assets/external/bootstrap-5.0.2/css/bootstrap.min.css" rel="stylesheet">

<div class="col-lg-8 main">
  <div class="contentbox">
    <h1 class="titlebar">
      <img class="center" src="https://images.pexels.com/photos/255419/pexels-photo-255419.jpeg?cs=srgb&dl=pexels-pixabay-255419.jpg&fm=jpg">
    </h1>
  </div>
</div>

    • 1

相关问题