1

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

我想要什么： 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;
}

有人知道如何在上面得到它吗？图像也可以，只要它在底部对齐 - 文本将具有不同的高度。

提前致谢！

4

1 回答 1

2

您可以在当前 div 之上覆盖一个 div。覆盖 div 将包含渐变背景。

演示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}
于 2013-09-12T21:23:07.467 回答