时间戳

首页 > 解决方案 > 无法在我的背景图像上使用不透明度

html - 无法在我的背景图像上使用不透明度

问题描述

只是试图使我的背景图像不透明但仍然能够正常查看文本并在其上书写，我找到了查看文本但无法在其上书写的方法，当它可以查看文本并在其上书写时，它只是一半的屏幕或背景图像并没有覆盖所有内容，所以我只是想看看我是否可以在这里找到一些帮助。

* { margin: 0; padding: 0; }

/* Centering */
body
{
    text-align: center;
}

/* Title Size and Font */
#title
{
    font-size: 40px;
    font-family: Mv Boli, sans-serif, arial;
}

/* Description Size and Font */
#description
{
    font-size: 20px;
    font-family: Mv Boli, sans-serif, arial;
}

/* Background Image */
.background-image
{
      position: fixed;
      top: 0;
      bottom: 0;
      width: 100%;
      height: 100%;
      opacity: 0.5;
      z-index: -5000;
      background-image: url("https://material.angular.io/assets/img/examples/shiba2.jpg");
      background-repeat: no-repeat;
      background-size: cover;
}

/* Survey Form Styling */
#survey-form
{
    background: hsl(204, 94%, 65%);
    max-width: 500px;
    margin: 50px auto;
    padding: 25px;
}
<body>
  <h1 id="title">Survey Form for Tech</h1>
  <p id="description">Help us improve your experience!</p>

  <!-- Background Image -->
  <div class="background-image"></div>

  <!-- Survey Form -->
  <form id="survey-form">
      <div class="form-flow">
          <label for="name" id="name-label">Name</label>
          <input id="name" type="text" required="" placeholder="Enter your name">
      </div>
  </form>
</body>

一切都解决了，我有 2 个指向图像的 URL，所以它们会发生冲突。

最新情况

标签： htmlcss

解决方案

在这种情况下，您可以::after为您的背景图像和不透明度设置伪元素。

* {
  padding: 0;
  margin: 0;
}

.background-image{
  Position:fixed;
  Top: 0;
  Bottom: 0;
  Width: 100%;
  Height: 100%;   
}

.background-image:after {
  position: absolute;
  content: '';
  background: url('https://via.placeholder.com/150/0000FF/808080') no-repeat center center / cover;
  width: 100%;
  height: 100%;
  opacity: 0.5;
}

#survey-form {
  //background: hsl(204, 94%, 65%);
  background: red;
  padding: 0; 
  margin: 50px auto; 
  position: absolute; 
  z-index: 1; 
  width: 500px;
  height: 300px;
  left: 50%;
  transform: translateX(-50%);
  padding: 20px;
}
<div class="background-image">
    <div id="survey-form">
      <p>Text 1</p>
    </div>
  </div>

推荐阅读