Question

我试图对图像实现渐变效果（我这样做了），但是它也覆盖了我的文字。我无法弄清楚需要在哪里更改代码，因此文本不会被渐变效果覆盖。有人可以解释或提供我需要阅读的必要信息的链接吗？

谢谢！


| city  | 21_nett | 25_nett | 28_nett |
|-------|---------|---------|---------|
| city1 | 211052  | 129511  | 277219  |
| city2 | 254547  | 329044  | 429072  |
| city3 | 109237  | 0       | 0       |

Answer 1

使用z-index: -1;到.header-filter::after代替z-index: 1; 也可以使用position:relative到.brand

.page-header {
height: 100vh;
color: #fff;
background-position: 50%;
background-size: cover;
background-image: url(../img/ggg.jpg);
display: flex;
align-items: center;
}

.brand {
    text-align: center;
    position:relative;
    z-index:2;
}

.header-filter::after {
    position: absolute;
    width: 100%;
    height: 100%;
    display: block;
    left: 0;
    top: 0;
    content: "";
    background: rgba(132,13,121,.88);
    background: linear-gradient(45deg,rgba(132,13,121,.88),rgba(208,44,180,.31));
    background: -webkit-linear-gradient(135deg,rgba(132,13,121,.88),rgba(208,44,180,.31));
    z-index: -1;
}

<div class="page-header header-filter">
    <div class="container">
        <div class="row">
            <div class="col-md-8 ml-auto mr-auto">
                <div class="brand">
                    <h1> Some smart text </h1>
                    <h3 class="title"> Start the Development With A Badass Bootstrap 4 UI Kit inspired by Material Design. </h3>
                </div>
            </div>
        </div>
    </div>  
</div>

Answer 2

将user = User(username=username, email=email, password=hashed_password)元素的.brand设置为高于z-index类的值。

还要确保将.header-filter元素的.brand属性设置为relative。

请参见以下示例：

position

.page-header {
  height: 100vh;
  color: #fff;
  background-position: 50%;
  background-size: cover;
  background-image: url(../img/ggg.jpg);
  display: flex;
  align-items: center;
}

.brand {
  text-align: center;
  position: relative;
  z-index: 2;
}

.header-filter::after {
  position: absolute;
  z-index: 1;
  width: 100%;
  height: 100%;
  display: block;
  left: 0;
  top: 0;
  content: "";
}

.header-filter::after {
  background: rgba(132, 13, 121, .88);
  background: linear-gradient(45deg, rgba(132, 13, 121, .88), rgba(208, 44, 180, .31));
  background: -webkit-linear-gradient(135deg, rgba(132, 13, 121, .88), rgba(208, 44, 180, .31));
}

html css bootstrap-4 shareeditflag asked 49 secs ago

文字上的渐变叠加

2 个答案: