0

首先，我不是开发人员，但我需要在我的 OBS 中快速修复 CSS。

在下图https://imgur.com/a/1rgPzC7上，您可以看到“AKII0 正在关注”。

我怎样才能将“AKII0 正在跟进”的文字向上移动，靠近横幅？

感谢帮助

html

<!-- alert image -->
<div id="alert-image-wrap">
  <div id="alert-image">{img}</div>
</div>

<!-- main alert box window -->
<div id="alert-text-wrap">

  <!-- alert text -->
  <div id="alert-text">

    <!-- alert message -->
    <!-- messageTemplate will be replaced with your message template -->
    <!-- for example : {name} is now following! or {name} donated {amount} -->
    <div id="alert-message">{messageTemplate}</div>
    <div id="alert-user-message">{userMessage}</div>

  </div>
</div>

CSS

body,
html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
#wrap {
  position: relative;
  height: 100%;
  width: 100%;
}
#alert-box {
  height: 100%;
  width: 100%;
  position: absolute;
}
#alert-box.hidden,
.hidden {
  opacity: 0;
}
#alert-text {
  padding: 20px;
  text-shadow: 0px 0px 1px #000, 0px 0px 2px #000, 0px 0px 3px #000,
    0px 0px 4px #000, 0px 0px 5px #000;
}
#alert-message,
#alert-user-message {
  text-align: center;
}
#alert-user-message img {
  vertical-align: middle;
  height: 1em;
}
#alert-image {
  position: relative;
}
#alert-image video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#alert-message > span > span {
  display: inline-block;
}
#alert-image {
  z-index: 6;
  position: relative;
}
#alert-text {
  z-index: 6;
  position: relative;
}
#alert-text-wrap {
  z-index: 6;
  position: relative;
}
4

1 回答 1

0

很难看到小屏幕截图发生了什么。您可能想尝试在codepen中重新创建它。

更复杂的是，您的许多 CSS ID 似乎不适用于您共享的 HTML。我还注意到您在 CSS#alert-image中#alert-text引用了两次。如果您不小心，所有这些事情都可能导致您的结果出现交叉线。

但是在我的脑海中，我会将您的图像和文本放入容器 div 中。然后我会根据需要使用CSS Flexbox将它们排列在容器 div 中。因为您使用的是填充，所以您可以使用填充进一步调整它们。

例如：

HTML

<!-- your new container -->
<div class="container">

  <!-- alert image -->
  <div id="alert-image-wrap">
    <div id="alert-image">{img}</div>
  </div>

  <!-- main alert box window -->
  <div id="alert-text-wrap">

    <!-- alert text -->
    <div id="alert-text">

      <!-- alert message -->
      <!-- messageTemplate will be replaced with your message template -->
      <!-- for example : {name} is now following! or {name} donated {amount} -->
      <div id="alert-message">{messageTemplate}</div>
      <div id="alert-user-message">{userMessage}</div>

    </div>
  </div>

</div>

CSS

（如果我看不到它们应用于您提供的 HTML，我将这些 ID 及其属性移动到下面的框中）。

body,
html {
  height: 100%;
  width: 100%;
  overflow: hidden;
}
.container {
  display: flex; /* Flex ensures items can be arranged in columns or rows and they wrap */
  flex-direction: column; /* Arranging things so they stack */
  justify-content: center; /* Puts the image and text together */
}
#alert-image {
  position: relative;
  padding-bottom: 0px; /* increase this if you want more padding */
}
#alert-image { /* redundant, merge into the original ID above */ 
  z-index: 6;
  position: relative;
}
#alert-text-wrap {
  z-index: 6;
  position: relative;
}
#alert-text {
  padding: 20px; /* This is equal to the 4 items below. Break it up as needed to get your spacing right.
    padding-top: 20px;
    padding-right: 20px;
    padding-bottom: 20px;
    padding-left: 20px; */
  text-shadow: 0px 0px 1px #000, 0px 0px 2px #000, 0px 0px 3px #000,
    0px 0px 4px #000, 0px 0px 5px #000;
}
#alert-text { /* redundant, merge into the original ID above */ 
  z-index: 6;
  position: relative;
}
#alert-message,
#alert-user-message {
  text-align: center;
}
#alert-user-message img {
  vertical-align: middle;
  height: 1em;
}

可能无用的 CSS

此 CSS 似乎不适用于您提供的 HTML。

#wrap {
  position: relative;
  height: 100%;
  width: 100%;
}
#alert-box {
  height: 100%;
  width: 100%;
  position: absolute;
}
#alert-box.hidden,
.hidden {
  opacity: 0;
}
#alert-image video {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
}
#alert-message > span > span {
  display: inline-block;
}

我希望这可以帮助您朝着正确的方向前进！

于 2020-03-29T02:56:21.860 回答