将一个物体放在另一个物体前面（并覆盖整个另一个物体）

问题描述 投票：0回答：1

我有两个 SVG 文件，它们是一个透明轮廓的椭圆形和一个没有轮廓的彩色椭圆形。我想用透明轮廓椭圆完全覆盖彩色椭圆，但它始终不与椭圆的侧面对齐。这是我的 CSS 代码和结果：

.character {
    position: relative;
    width: 200px; /* Adjust the size as needed */
    height: 400px; /* Adjust the size as needed */
}

.part {
    position: absolute;
}

.head {
    animation: float 2s ease-in-out infinite;
}
.headcolor {
   z-index: 1;
   margin-top: -200px;
   position: relative; 
  top: 0; 
  left: 0; 
}

.headoutline {
   z-index: 2;
   position: relative;
  top: 0; 
  left: 0; 
  width: 100%; 
  height: 100%; 
}

@keyframes float {
    0%, 100% {
        transform: translateY(0); /* Starting position */
    }
    50% {
        transform: translateY(-5px); /* Float up by 10 pixels */
    }
}

enter image description here

将 .headcolor 的 margin-top 更改为 -500px 后，没有任何变化：

enter image description here

这是我的结果应该是什么样子，以及我的 HTML 代码。

enter image description here

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Character Assembly</title>
    <link rel="stylesheet" href="player.css">
</head>
<body>
    <div class="character">
        <!-- Outline SVG -->
        <div class="head">
        <object data="/svgs/head/shapes/9.svg" type="image/svg+xml" class="headoutline"></object>
        <!-- Filling SVG -->
        <object data="/svgs/head/shapes/7.svg" type="image/svg+xml" class="headcolor"></object>
    </div>
      <!--  <object data="body.svg" type="image/svg+xml" class="part body"></object>
        <object data="leftarms.svg" type="image/svg+xml" class="part arms"></object>
        <object data="rightarms.svg" type="image/svg+xml" class="part arms"></object>
        <object data="leftlegs.svg" type="image/svg+xml" class="part legs"></object>
        <object data="rightlegs.svg" type="image/svg+xml" class="part legs"></object>
    </div> -->

    <script src="player.js"></script>
</body>
</html>
html css svg
1个回答
0
投票

[class*="EditableArea"] h1:last-child, [class*="EditableArea"] h2:last-child, [class*="EditableArea"] h3:last-child, [class*="EditableArea" ] h4:last-child, [class*="EditableArea"] h5:last-child, [class*="EditableArea"] h6:last-child, [class*="EditableArea"] p:last-child, [ class*="EditableArea"] ul:last-child, [class*="EditableArea"] ol:last-child, [class*="EditableArea"] form:last-child, [class*="EditableArea"] blockquote :last-child, [class*="EditableArea"] dl:last-child, [class*="EditableArea"] pre:last-child\

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.