时间戳

首页 > 解决方案 > 您能否将不在该块内的块内的文本居中？CSS

html - 您能否将不在该块内的块内的文本居中？CSS

问题描述

我最近开始学习使用 html 和 css 创建网站。对于我的网站，我想创建一个足够透明的文本块，可以看到后面的图像，但是我不希望它上面的文本也透明。据我所知，唯一可行的方法是让文本实际上不在框中，而是在其顶部。因此我在顶部添加了文本，但问题是，我无法真正将文本居中，因为没有任何东西可以对齐它。我能想到的唯一解决方案是，也许实际上还有另一种方法可以使文本不透明，而框仍然如此，或者在文本的一侧创建不可见的边框以使其对齐，但由于我是初学者，我真的不知道该怎么做。有办法吗？

* {
  position: relative;
  z-index: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

.central {
  position: relative;
  height: 1080px;
  width: 100%;
  z-index: 0;
}

.image {
  position: absolute;
  z-index: 0;
}

.slide {
  position: absolute;
  z-index: 0;
  height: 100%;
  width: 400px;
  display: block;
  top: 0px;
  left: 0px;
  opacity: 50%;
  background-color: #6B3F3F;
}

.slidetext h3 {
  top: 10px;
  left: 0px;
  right: 1520px;
  position: absolute;
  z-index: 1;
  color: white;
  padding-left: 200px;
  padding-right: 800px;
}
<div class="main">
  <div class="central">
    <img class="image" src="https://via.placeholder.com/150" alt="Supposed background. Error.">
    <div class="slide">
    </div>
    <div class="slidetext">
      <h3>Title</h3>
    </div>
  </div>
</div>

标签： htmlcss

解决方案

使用 rgba 代替不透明度；这样，文本仍然可以在它之上而不会受到影响。

background-color: rgba(107,63,63, 0.5)

这里我把标题放回.slidediv 里面来说明。

* {
  position: relative;
  z-index: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

.central {
  position: relative;
  height: 1080px;
  width: 100%;
  z-index: 0;
}

.image {
  position: absolute;
  z-index: 0;
}

.slide {
  position: absolute;
  z-index: 0;
  height: 100%;
  width: 400px;
  display: block;
  top: 0px;
  left: 0px;
  background-color: rgba(107, 63, 63, 0.5)
}

.slidetext h3 {
  color: white;
  text-align: center;
  margin-top: 10px;
}
<div class="main">
  <div class="central">
    <img class="image" src="programming.png" alt="Supposed background. Error.">
    <div class="slide">
      <div class="slidetext">
        <h3>Title</h3>
      </div>
    </div>
  </div>
</div>

推荐阅读