1

以下にリンクしている画像のように、テキストをグラデーションで消したいのですが、カーソルを合わせるとグラデーションが消えます。

私が欲しいもの: http://s7.postimg.org/59m1vxfwr/screen.png

CSSで背景グラデーションを使用できれば最高ですが、テキストの「上」に配置する必要があるとは思いません。

Heres は、すべての下にあるグラデーション (今は黄色ですが、白が必要です) を使用して、私が現在持っているものに 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 に答える