【问题标题】:How can I override this gradient filter using CSS?如何使用 CSS 覆盖这个渐变过滤器?
【发布时间】:2015-03-19 10:23:56
【问题描述】:

我正在尝试摆脱/覆盖主页上图像的渐变滤镜,我正在使用this child theme

我是新手,但这是我一直在编辑的代码:

.image-section {
background: -moz-linear-gradient(top,  rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.5) 30%, rgba(0,0,0,0.8) 80%, rgba(0,0,0,0.9) 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.2)), color-stop(30%,rgba(0,0,0,0.5)), color-stop(80%,rgba(0,0,0,0.8)), color-stop(100%,rgba(0,0,0,0.9)));
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: -o-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: -ms-linear-gradient(top,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
background: linear-gradient(to bottom,  rgba(0,0,0,0.2) 0%,rgba(0,0,0,0.5) 30%,rgba(0,0,0,0.8) 80%,rgba(0,0,0,0.9) 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#33000000', endColorstr='#e6000000',GradientType=0 );
display: table;
overflow: hidden;
table-layout: fixed;
width: 100%;
}

我试过改成:

.image-section {
background: none;
background-color: transparent;
display: table;
overflow: hidden;
table-layout: fixed;
width: 100%;
}

我什至尝试过“!important”,但似乎没有任何解决办法。这个 php(在customize.php 中)可能与它有关吗?

global $wp_customize;

$images = apply_filters( 'altitude_images', array( '1', '3', '5', '7' ) );

【问题讨论】:

    标签: php css wordpress gradient linear-gradients


    【解决方案1】:

    我看了看页面。您不能覆盖背景的原因是它使用媒体查询:@media all {}

    正如强大的@BoltClock 所建议的那样,媒体不会增加特异性,因此或多或少可以快速修复:

    css

    div .image-section {
        background: none;
    }
    

    将添加特异性,因此如果最后一条规则不起作用,则可能有一些 javascript 或 php 在应用 css 后应用了该类。

    【讨论】:

    • @media all 相当于根本没有指定媒体声明。即使媒体查询在某种程度上是限制性的,媒体查询对特异性也没有影响。由于没有选择器,您所拥有的也是无效的。
    • @BoltClock sutch 意思是评论...忘记了 .image-section 将对其进行编辑。所有强大的 BoltClock 是什么原因导致她的 CSS 不会覆盖渐变背景?
    • 为什么人们总是把直率和纠正别人误认为粗鲁?
    • @J.Steen 因为“这是错误的”和“我想你可能忘记了”之间存在区别
    • @Persijn 这个地方是关于信息、事实、问题和答案的。这不是关于我们作为人类感到毛茸茸的。
    猜你喜欢
    • 2014-07-07
    • 2010-12-18
    • 1970-01-01
    • 1970-01-01
    • 2013-05-17
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2019-06-02
    相关资源
    最近更新 更多