Question

background-img是一个div，它包装了所有其他类。

我尝试使用:: before方法，但也无法使其正常工作。如果我还有其他改进之处，请告诉我。预先感谢

        pushl %ebp
    movl %esp, %ebp

        movl 16(%ebp), %esi
        movl 12(%ebp), %edi
        movl 8(%ebp), %eax
        movl $0, %ebx
        subl $8, %esp
        jmp .LL1

.LL1:
        cmpl %ebx, %esi
        je .LL2
        movl %ebx, 4(%esp)
        movl %eax, (%esp)
        addl $1, %ebx
        jmp .LL1

.LL2:
    popl %ebp
    ret

Answer 1

您需要通过将背景添加为伪元素来实现

.background-img {
    height: 100vh;
    width: 100vw; 
}
.background-img:after{
  content: '';
  opacity: 0.5;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  position: absolute;
  z-index: -1;   
  background: url(https://www.drupal.org/files/user-pictures/picture-2204516-1469808304.png) no-repeat center center;
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(100%);
  background-size: cover;
}
.header-img-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
}

.logo1 {
    height: 10vh;
    width: auto;
    margin: 1.5rem;
}

.logo2 {
    height: 10vh;
    width: auto;
    margin: 1.5rem;
}

.paragraph-img-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    text-align: center;
    margin: 5rem;
}

.main-paragraph {
    font-size: 2rem;
}

.loading-container {
    display: flex;
    justify-content: center;
}

<div class="background-img">
  <div class="header-img-container">
    <img src="https://www.drupal.org/files/user-pictures/picture-2204516-1469808304.png">
  </div>
    <div class="logo1">
    <img src="https://www.drupal.org/files/user-pictures/picture-2204516-1469808304.png">
    </div>
</div>

如何在不影响其他元素的情况下对背景图像CSS进行灰度处理和不透明处理？

1 个答案: