粗大的内捧猛烈进出少妇,av天堂亚洲国产av

国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

我有三個(gè)獨(dú)立的 SVG 文件，當(dāng)它們彼此層疊時(shí)，它們將創(chuàng)建一個(gè)圖形。第一個(gè) SVG 文件是一個(gè)紅色三角形，第二個(gè)是位于三角形內(nèi)部的藍(lán)色圓圈，第三個(gè)是位于三角形底部的紫色矩形（三角形和矩形之間有一點(diǎn)空間）。我的目標(biāo)是將所有三個(gè) SVG 文件在頁(yè)面中央相互疊加。下面是我的 HTML 和 CSS 代碼。

*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

.graphic{
  height: 100vh;
  width: 100vw;
  background-color: palegreen;
  display: grid;
  place-items: center;
  position: relative;
}
.triangle{
  position: absolute;
}
.circle{
  position: absolute;
  top:0;  
}
.rectangle{
  position:relative;
}

<!DOCTYPE html>
<html lang="en">
   <head>
      <meta charset="UTF-8">
      <meta http-equiv="X-UA-Compatible" content="IE=edge">
      <meta name="viewport" content="width=device-width, initial-scale=1.0">
      <title>Graphic-center</title>
      <link rel="stylesheet" href="style.css">
   </head>
   <body>
      <div class="graphic">
         <div>
            <img src="stackoverflow/SVG/triangle.svg" class="triangle" width="150px"/>
         </div>
         <div>
            <img src="stackoverflow/SVG/circle.svg" class="circle" width="150px"/>
         </div>
         <div>
            <img src="stackoverflow/SVG/rectangle.svg" class="rectangle" width="150px"/>
         </div>
      </div>
   </body>
</html>

正如你在我的 CSS 中看到的，我嘗試使用 —position:absolute;和位置：相對(duì)； - 但我仍然無(wú)法讓它們?cè)陧?yè)面中心正確地相互重疊。請(qǐng)記住，一旦 SVG 文件正確居中，我將使用 @keyframes 對(duì)它們進(jìn)行動(dòng)畫(huà)處理，并且我需要單獨(dú)對(duì)它們進(jìn)行動(dòng)畫(huà)處理（除非有其他方法），因此每個(gè) SVG 文件的位置無(wú)法在頁(yè)面上固定（即我需要能夠移動(dòng)它們）。有人可以幫忙嗎？提前致謝。

* { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; } .graphic { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; background-color: palegreen; position: relative; } .triangle, .circle, .rectangle { position: absolute; } .circle { top: 0; left: 0; right: 0; bottom: 0; margin: auto; } .rectangle { bottom: 20px; /* Adjust this value to add space between the triangle and rectangle */ }

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Graphic-center</title> <link rel="stylesheet" href="style.css"> </head> <body> <div class="graphic"> <img src="stackoverflow/SVG/triangle.svg" class="triangle" width="150px"/> <img src="stackoverflow/SVG/circle.svg" class="circle" width="150px"/> <img src="stackoverflow/SVG/rectangle.svg" class="rectangle" width="150px"/> </div> </body> </html>

* { margin: 0; padding: 0; box-sizing: border-box; } .graphic { background-color: palegreen; display: grid; place-items: center; grid-template-columns: 100vw; grid-template-rows: 100vh; } .triangle { z-index: 2; } .circle, .rectangle, .triangle { display: block; grid-column: 1; grid-row: 1; }