Question

我正在尝试为我正在建造的网站上的一组图像设置颜色渐变，但我什么都没得到。我想我正在使用正确的代码，但我不认为我使用的规则是正确的。

这就是我现在所拥有的 -

styles.css的

.img_holder:before {
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);

  opacity: 0;
  z-index: 2;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
          transition-duration: 0.3s;
}


 .img_holder img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}



 .wrapper .img_holder .details {
  /* font-size: 10px; */
  padding: 0px 20px 20px 20px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
   opacity: 0;
  transition: .7s ease;
  background-color: rgba(0,0,0,0.7);
}


.img_holder:hover .details {
  opacity: 4;
}

的index.html

     <div class="brick">
              <img src="2images/2advertising.jpg">
             <div class="details">
               <span id="title">Lorem Ipsum Dolor</span>
              <span id="info">Quisque vel felis lectus donec vitae dapibus magna</span>
                   </div>
          </div>

目前图片看起来像这样 -

我希望背景颜色淡入图像而不是停留在文本的顶部。我在其他例子中看到了这一点，但似乎无法复制它。任何帮助表示赞赏

Answer 1

道歉，如果我没有正确格式化，第一次回答。

这是我认为你要求的。只需使用一些渐变并使用不透明度来淡化背景就可以了。

<div class="card">
    <img src="http://placekitten.com/250/350" alt="">
    <div class="card__caption">
        <span class="card__caption__title">Lorem Ipsum</span>
        <span class="card__caption__body">At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis</span>
    </div>
</div>

.card {
    position: relative;
    width: 250px;
}

.card__caption {
    position: absolute;
    bottom: 0;
    padding: 40px 20px 20px 20px;
    background: linear-gradient(to top, rgba(0,0,0,.9), rgba(0,0,0,0));
 }

 .card__caption__title,
 .card__caption__body {
     display: block;
     color: white;
 }

 .card__caption__title {
     font-size: 1.4em;
 }

以下是一支笔：https://codepen.io/andrewchar/pen/MEXYza?editors=1100

Answer 2

尝试将渐变放在图像而不是文本容器上。

=TEXT(CONCAT("JAN  ",A1), "YYYY")

见。 https://css-tricks.com/design-considerations-text-images/

Answer 3

您的代码中存在许多错误/缺陷：

/Desktop/JOO$ ipfs swarm peers使该元素完全透明/不可见，无论其背景设置如何

不透明度值opacity: 0不存在

您的html代码中没有4类的元素

HTML代码中没有.img_holder个类

如果最后一个css规则是作为倒数第二个的悬停类，它需要相同的特性：从倒数第二个规则中删除.wrapper类。

.wrapper元素需要更多设置，通常通过:before和适当的位置和大小设置与主元素相关，并且主要元素需要position: absolute才能进行绝对定位工作

HM。

我希望我在代码片段中所做的事情会在某种程度上帮助你。至少有一个渐变背景，一个元素在图像上方悬停...

＆＃13;

position: relative

＆＃13;

.img_holder {
  background: -webkit-linear-gradient(top, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  background: linear-gradient(to bottom, transparent 0%, rgba(0, 0, 0, 0.7) 100%);
  opacity: 1;
  z-index: 2;
  -webkit-transition-property: top, opacity;
  transition-property: top, opacity;
  -webkit-transition-duration: 0.3s;
  transition-duration: 0.3s;
  border: 1px solid red;
}

.img_holder img {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}

.img_holder .details {
  /* font-size: 10px; */
  padding: 0px 20px 20px 20px;
  color: #fff;
  position: absolute;
  bottom: 0;
  left: 0;
  z-index: 3;
  opacity: 0;
  transition: .7s ease;
  background-color: rgba(0, 0, 0, 0.7);
}

.img_holder:hover .details {
  opacity: 1;
}

＆＃13;

颜色渐变不起作用

3 个答案: