Question

这是jsfiddle：

下面粘贴的代码：

＆＃13;

.cover {
    background: linear-gradient(to bottom, rgb(0,0,255,0.5), rgb(238,130,238,0.5));
    background: -webkit-linear-gradient(top, rgb(0,0,255,0.5), rgb(238,130,238,0.5));

    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    z-index: 99999;
    position: absolute;
}

＆＃13;

<h2> I'm bottom</h2>
<div class="cover"></div>

＆＃13;

从演示中可以看出，封面根本没有显示。如果我将rgb(0,0,255,0.5)更改为rgb(0,0,255)，封面可以显示，但会失去透明度..

有没有人有关于如何保持透明度和渐变的想法？

Answer 1

使用.cover { background: linear-gradient(to bottom, rgba(0,0,255,0.5), rgba(238,130,238,0.5)); background: -webkit-linear-gradient(top, rgba(0,0,255,0.5), rgba(238,130,238,0.5)); bottom: 0; top: 0; left: 0; right: 0; z-index: 99999; position: absolute; }代替

 $term = get_term_by( 'slug', get_query_var( 'term' ), get_query_var( 'taxonomy' ) ); 
$args = array(
    'post_type' => 'post',
    'tax_query' => array(
        array(
           'taxonomy' => 'story-category',
           'field'    => 'slug',
           'terms'    => $term->slug,
        ),
    ),
);
$query = new WP_Query( $args );

http://jsfiddle.net/txj54fL9/1/

Answer 2

Pikamander2的回答是解决方案，请记住，您仍然可以使用opacity:0.5;来获取任何元素。

看看here

在CSS3中，使用`gradient`和`gradient`并不起作用？

2 个答案: