workspace/.history/soul-app/src/app/drift-bottle/drift-bottle.component_20241224143746.scss

/* drift-bottle.component.scss */
:host {
    display: block;
}

/* 设置页面背景色 */
ion-content {
    --background: transparent; /* 确保内容背景透明 */
    position: relative;
    height: 100vh; /* 确保内容高度占满整个视口 */
}

.top-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 80%; /* 图片占据页面的70%高度 */
    overflow: hidden;
    z-index: 0; /* 确保图片在工具栏之下 */
}

.top-image img {
    width: 100%;
    height: 100%;
    object-fit: fill; /* 使图片填充整个容器并可能被拉伸 */
}


  
  ion-button {
    font-size: 15px; /* 增大字体大小 */
    margin-top: 8px; /* 上间距，仅在需要时添加 */
    text-transform: none; /* 按钮文字不变形 */
    height: 35px;
  }
  

/* 其他内容的样式可以根据需要添加 */
.content-container {
    position: relative;
    z-index: 1; /* 确保其他内容在图片之上 */
    padding: 20px;
    margin-top: 120%; /* 内容从图片下方开始 */
}