如何设置渐变

Question

我有下面的代码。

.imgcol1 {
  background-image: url(https://picsum.photos/200/300);
  background-repeat: no-repeat;
  background-size: cover;
  height: 190px;
  width: 520px;
}

.col1 {
  margin: 75px;
}

.grad {
  background: linear-gradient(to right, rgba(102, 126, 234, 0.7), rgba(245, 245, 245, 0.7))
}

<div class="row vh-100 mt-5 d-flex justify-content-center">
  <div class="col-6 imgcol1 col1 text-white">
    <p>California</p>
    <h2>Sacramento</h2>
    <p>Esplora <i class="fa-solid fa-arrow-right"></i></p>
    <div class="row grad">

    </div>
  </div>
</div>

我需要创建一个线性渐变，如下图所示。

我想过在列上加一行，然后把渐变放在这一行，就是行不通。

谁能告诉我怎么做？

Answer 1

已编辑：实际上，如果我们仔细观察，渐变是一个叠加层，而不是背景，这意味着它在图像的顶部而不是在图像的后面。

HTML

.imgcol1 {
  background-image: url(https://picsum.photos/200/300);
  background-repeat: no-repeat;
  background-size: cover;
  height: 190px;
  width: 520px;
  /*  filter: drop-shadow(-30px -10px 4px #4444dd); */
}

.col1 {
  margin: 75px;
}

.grad {
  background: linear-gradient(to right, rgba(102, 126, 234, 0.7), rgba(245, 245, 245, 0.7))
}

.myGrad {
  z-index: 999;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(to right, rgba(102, 126, 234, 0.5), rgba(245, 245, 245, 0.0), rgba(245, 245, 245, 0.0));
  transform: translate(-11%, -95%);
}

<div class="row vh-100 mt-5 d-flex justify-content-center">
  <div class="col-6 imgcol1 col1 text-white">
    <p>California</p>
    <h2>Sacramento</h2>
    <p>Esplora <i class="fa-solid fa-arrow-right"></i></p>
    <div class="row myGrad">

    </div>
  </div>
</div>

这是一支有效的密码笔。您可以修改 class “.myGrad” 中的值，以完全按照您的需要获得方框和渐变。

https://codepen.io/MarwanAK10/pen/JjOVeGM

Answer 2

我code-reviewed喜欢并更新。

.container {
  position: relative;
}

.imgcol1 {
  background-image: url(https://picsum.photos/200/300);
  background-repeat: no-repeat;
  background-size: cover;
  height: 200px;
  width: 200px;
}
.imgcol1 p{
  margin:0;
}

.imgcol1:before {
  content: '';
  position: absolute;
  width: 140px;
  height: 140px;
  z-index: -1;
  top: -20px;
  left: -20px;
  background: linear-gradient(to right, rgba(102, 126, 234, 0.7), rgba(245, 245, 245, 0.7));
}

<div class="row vh-100 mt-5 d-flex justify-content-center container">
  <div class="col-6 imgcol1 col1 text-white">
    <p>California</p>
    <h2>Sacramento</h2>
    <p>Esplora <i class="fa-solid fa-arrow-right"></i></p>
  </div>
</div>

Answer 3

我在 CSS 中添加了一些评论，但在这里我稍微改变了布局，然后使用了两列的模式，第一列包含文本和图像，第二列包含渐变。

此处渐变变换的一个问题是它延伸到其容器之外 - 尝试 un-commenting 我放入的边框只是为了视觉效果，看看我的意思是什么。

注意：此示例还包括 bootstrap，因为您有它，并且它将文本颜色设置为白色。

.outer-container {
  /* border: solid 1px lime; */
}

.outer-row {
  /* border: solid 1px blue;*/
}

.image-column {
  background-image: url(https://picsum.photos/200/300);
  background-repeat: no-repeat;
  background-size: cover;
  height: 190px;
  width: 100%;
}

.column-text {
  /*  border: solid 1px yellow; */
}

.gradient-column {
  /* force layout - this or &nbsp; in the html */
  border 1px solid transparent;
  background: linear-gradient(to right, rgba(127, 156, 179, 0.9), rgba(245, 245, 245, 0.0));
  /* move this a bit left and up */
  transform: translate(-8%, -115%);
  height: 190px;
  /* force this behind */
  z-index: -999;
  /* border: 1px solid #444488; */
}

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@5.15.4/css/fontawesome.min.css" integrity="sha384-jLKHWM3JRmfMU0A5x5AkjWkw/EYfGUAGagvnfryNV3F9VqM98XiIH7VBGVoxVSc7" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.min.js" integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13" crossorigin="anonymous"></script>

<div class="container outer-container">
  <div class="row outer-row">
    <div class=" col-12 mt-5 d-flex ">
      <div class="col col-12 image-column column-text text-white">
        <p>California</p>
        <h2>Sacramento</h2>
        <p>Esplora <i class="fa fa-solid fa-arrow-right"></i></p>
      </div>
    </div>
    <div class="col col-12 gradient-column"></div>
  </div>
</div>

如何设置渐变

How to set the gradient

css

linear-gradients

bootstrap-4

bootstrap-5