如何结合背景图像中的线性渐变、悬停时的不透明度和文本颜色变化？

Question

Div 标签包含从底部开始具有黑色和透明线性渐变的背景图像。在鼠标悬停状态下，图像改变不透明度，图像上的文本同时改变颜色。如何完成上述所有这三件事。 I want to achieve this similar effect.

这是我的代码：

.container{
    position: relative;
    cursor: pointer;

}
.container::after{
    content: '';
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    position: absolute;
    background: linear-gradient(
        0deg,
        rgba(0,0,0, 0.8) ,
        transparent 30%,
        transparent
    );
}
.container p{
    position: absolute;
    bottom: 2rem;
    padding: 0 2rem;    
    text-transform: uppercase;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 2rem;
    font-weight: 300;
    color: var(--white);
}

.container p:hover{
    color: var(--black);

}
.container:hover{
    opacity: 0.4;
}

<div  class="container">
  <img id="image1" src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1472&q=80" alt="Deep Earth">
  <p id="p1">Deep earth</p>
</div>

Answer 1

您只需要在 CSS 中做一些 re-organizing，这样您的选择器就会定位到正确的元素。我还在文本中添加了一个 z-index，因此它不在渐变之下。

.container {
  display: block;
  position: relative;
  cursor: pointer;
  width: fit-content;
}

.container::after {
  content: '';
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  position: absolute;
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.8),
      transparent 30%,
      transparent);
}

.container p {
  display: block;
  position: absolute;
  bottom: 2rem;
  padding: 0 2rem;
  text-transform: uppercase;
  font-family: 'Josefin Sans', sans-serif;
  font-size: 2rem;
  font-weight: 300;
  color: white;
  z-index: 2;
}

.container:hover p {
  color: black;

}

.container:hover img {
  opacity: 0.4;
}

<div class="container">
  <img id="image1" src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1472&q=80" alt="Deep Earth">
  <p id="p1">Deep earth</p>
</div>

Answer 2

我对 CSS 做了一些改动，我在 CSS 代码中评论了我所做的事情以及原因。

/* Body Margin 0 is just for the snippet */
body {margin: 0}

/* Added hidden overflow */
.container {
    cursor: pointer;
    overflow: hidden;
    position: relative;

}

/* Use both before and after */
.container::before,
.container::after {
    content: '';
    position: absolute;

    /* Same as top, right, bottom, left = 0 */
    inset: 0;

    /* z-index to control layer depth */
    z-index: 1;
}

/* Use before to simulate the opacity change */
/* Stops the text from fading as well as the container */
.container::before {
    background: white;
    opacity: 0;

    /* Place above dark gradient so that text is more visible */
    z-index: 2;

    /* Transition to make it look smooth */
    transition: opacity 512ms 0ms ease-in-out;
}
.container::after {
    background: linear-gradient(
        0deg,
        rgba(0,0,0, 0.8) ,
        transparent 30%,
        transparent
    );
}

/* Removes bottom margin/padding from last element */
.container > *:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
}

/* Set the img to always be 100% of the viewport width */
.container img { width: 100vw }

.container p {
    color: white;
    position: absolute;

    /* Same as bottom: 2rem; left: 2rem; */
    inset: auto auto 2rem 2rem;
    text-transform: uppercase;
    font-family: 'Josefin Sans', sans-serif;
    font-size: 2rem;
    font-weight: 300;

    /* Make sure the text wraps in the right place */
    max-width: calc(100% - 4rem);

    /* Forces text to be above before/after */        
    z-index: 3;

    /* Linear transition here! */
    /* White to black text can look out of sync otherwise */
    transition: color 512ms 0ms linear;
}

.container:hover p { color: black }
.container:hover::before { opacity: 0.4 }

<div  class="container">
  <img id="image1" src="https://images.unsplash.com/photo-1451187580459-43490279c0fa?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1472&q=80" alt="Deep Earth">
  <p id="p1">Deep earth</p>
</div>

如何结合背景图像中的线性渐变、悬停时的不透明度和文本颜色变化？

How to combine linear gradient in background image, opacity and text color change on hover?

html

css