Question

我希望文本在渐变中消失，就像我链接到下面的图像一样，在悬停时渐变会消失。

我想要的： http://s7.postimg.org/59m1vxfwr/screen.png

如果我可以在CSS中使用背景渐变，那么最好的事情就是如此，但我不知道必须将它置于文本的“上方”。

对于我现在所拥有的东西来说，这是一个jsfiddle，有一个渐变（现在是黄色，但我想要白色）。 http://jsfiddle.net/RxLfV/1/

HTML：

<section class="thework">
    <a href="<?php the_permalink(); ?>">
        <div class="thetitle">
            Test 1
        </div>
        <div class="thedescription">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.
        </div>
    </a>
</section>
<section class="thework">
    <a href="<?php the_permalink(); ?>">
        <div class="thetitle">
            Test 2
        </div>
        <div class="thedescription">
            Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy.
        </div>
    </a>
</section>
<section class="thework">
    <a href="<?php the_permalink(); ?>">
        <div class="thetitle">
            Test 3
        </div>
        <div class="thedescription">
            Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
        </div>
    </a>
</section>

CSS：

.thework a {
    width: 100%;
    float: left;
    display: block;
    font-size: 1em;
    font-family: sans-serif;
    color: black;
    background: -moz-linear-gradient(top,  rgba(255,242,0,0) 0%, rgba(255,242,0,1) 100%);
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(255,242,0,0)), color-stop(100%,rgba(255,242,0,1)));
    background: -webkit-linear-gradient(top,  rgba(255,242,0,0) 0%,rgba(255,242,0,1) 100%);
    background: -o-linear-gradient(top,  rgba(255,242,0,0) 0%,rgba(255,242,0,1) 100%);
    background: -ms-linear-gradient(top,  rgba(255,242,0,0) 0%,rgba(255,242,0,1) 100%);
    background: linear-gradient(to bottom,  rgba(255,242,0,0) 0%,rgba(255,242,0,1) 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00fff200', endColorstr='#fff200',GradientType=0 );
}
.thework a:hover {
    background: none;
}
.thetitle {
    width: 25%;
    left: 25%;
    margin-top: 2em;
    margin-bottom: 2em;
    float: left;
    position: relative;
}
.thedescription {
    width: 50%;
    left: 25%;
    margin-top: 2em;
    margin-bottom: 2em;
    float: left;
    position: relative;
}

有人知道怎么弄它吗？图像也可以工作，只要它在底部对齐 - 文本将具有不同的高度。

提前致谢！

Answer 1

您可以在当前div上叠加div。叠加div将包含渐变背景。

DEMO http://jsfiddle.net/kevinPHPkevin/6k3vV/54/

.fadeout {
    position: absolute; 
    bottom: 0em;
    width:100%;
    height: 4em;
    background: -webkit-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    ); 
    background-image: -moz-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -o-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
    background-image: -ms-linear-gradient(
        rgba(255, 255, 255, 0) 0%,
        rgba(255, 255, 255, 1) 100%
    );
} 
section {position:relative}

文字在渐变中消失

1 个答案: