【问题标题】:How to apply background Gradient style css如何应用背景渐变样式css
【发布时间】:2018-08-09 03:01:07
【问题描述】:

我想像这样应用 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>

任何人对这种类型样式有想法,请更新我。

谢谢。

【问题讨论】:

    标签: css background styles gradient opacity


    【解决方案1】:

    看起来渐变在您的示例中的图像顶部。这段使用伪元素的代码将为您做到这一点,而不是将渐变代码放在 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 上方添加了,但看起来像这样 -> nimb.ws/CwMDrR 不全宽显示内容。在左侧和右侧显示空格。
    • 这意味着你在错误的元素上。将 CSS 从 .zl-artful-featured-title 移动到它的父容器之一。没有你的代码很难说,但我敢打赌它会是.zl-artful.zl-artful-featured
    • 我已经在父类 .zl-artful-featured-title 中应用了样式,但显示出来的效果是这样的 -> nimb.ws/CwMDrR
    • 我明白了,您希望它覆盖整个图像,对吗? .zl-artful-featured-title 是错误的元素。您需要将伪元素 CSS 从其中移动到包含图像的父元素。
    • 不是不是整个图像。我只想覆盖该部分的底部文本部分。
    【解决方案2】:

    #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%
      );
    }
    

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

    【讨论】:

    • 你的浏览器是什么?我可以看看结果吗?
    • 你的风格中的问题。样式不显示在检查元素中。所以请检查你的风格并更新我。
    • 您是否将 # 更改为 . ?因为您使用的类不是像我上面的示例那样的 id
    • 是的,我这样做了,但样式没有出现。
    • 试试我的新sn-p
    猜你喜欢
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-08-26
    • 2011-08-08
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多