如何应用背景渐变样式 css

Question

我想像这样应用 nackground 渐变样式 -> http://nimb.ws/Xq79Uw

以下是HTML代码：

<div class="featured-title zl-artful-featured-title">
   <aside class="post-meta cf">
      <a aria-label="Artful Interiors" class="cat-artful-interiors" href="http://localhost/magnifissance/?cat=86">Artful Interiors</a>                                          
   </aside>
   <div class="row">
      <div class="columns medium-10">
         <div class="post-title zl-artful-interi-title">
            <a href="http://localhost/magnifissance/?p=12466">Enrico Fratesi Shares His Vision of Form, Tradition and Renewal</a>
         </div>
      </div>
      <div class="columns medium-2">
         <figure class="post-gallery "></figure>
      </div>
   </div>
</div>

任何人对这种类型风格有想法然后请告诉我。

谢谢。

Answer 1

#zl-artful-featured-title{
   background: linear-gradient(
    to top,
    #63B4C9  35%,
    #FFFFFF 70%
  );
  background-repeat: no-repeat;
  height:260px;
  width:100%;
}

<div id="zl-artful-featured-title">
    <p>Content</p>
    <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcTvbOaFeLuR9IUkcut98bJs4r7-Qm8AGcEEYiiKxiAZEiljvUS_"/>
</div>

试试这个

#zl-artful-featured-title{
  background-image: -webkit-linear-gradient(90deg, #63B4C9 35%, #FFFFFF 40%);

}

如果不起作用试试这个

 #zl-artful-featured-title{
  background: linear-gradient(
    to bottom,
    #63B4C9  35%,
    #FFFFFF 70%
  );
}

确保您已将 # 更改为。如果您使用 class。希望对你有帮助

Answer 2

在您的示例中，渐变看起来像是在图像之上。这段使用伪元素的代码将为您做到这一点，而不是将渐变代码放在 div 本身上。

#artful_interiors .post > a {
    position: relative;
}

#artful_interiors .post > a:before {
    content: " ";
    position: absolute;
    width: 100%;
    height: 100%;
    background: linear-gradient( to bottom, rgba(0,0,0,0) 50%, #000 95% );
}

如何应用背景渐变样式 css

How to apply background Gradient style css

css

styles

gradient

background

opacity