-3

次のバナーを作成する必要があります: http://schuub.net/banner.png

私の質問は、このガーディエントを白から透明に作成して、左側の画像を部分的にオーバーレイするにはどうすればよいかということです。

私のhtmlはここにあります： http://schuub.net/banner.html

  <!doctype html>
<html lang="en">
<head>

    <style>
        body {
            margin: 0 auto;
            width: 1024px;
        }

        .my-banner {
            background-repeat: no-repeat;
            background-position: right -175px;
            background-image: url("http://sphotos-c.ak.fbcdn.net/hphotos-ak-ash3/s720x720/3755_4323318453951_692396489_n.jpg");
            height: 200px;
            width: 100%;
            position: relative;
            border:solid 1px;
        }

        .banner-data {
            position: absolute;
            left: 0;
            top: 0;
            width: 70%;
            height: 100%;
            background: -ms-linear-gradient(left, rgba(255,255,255,1) 0%,rgba(255,255,255,0) 100%); /* IE10+ */
            border:solid 1px;
        }
    </style>
</head>

<body>
    <div class="my-banner">
        <div class="banner-data">
        </div>
    </div>
</body>
</html>

乾杯、ステファン

4

2 に答える 2

1

これを試して：

フィドル

HTML

<div class="my-banner"></div>

CSS

    body {
    margin: 0 auto;
    width: 1024px;
}
.my-banner {
    background-repeat: no-repeat;
    background-position: right -175px;
    background-image: url("http://sphotos-c.ak.fbcdn.net/hphotos-ak-ash3/s720x720/3755_4323318453951_692396489_n.jpg");
    height: 200px;
    width: 1024px;
    background: url('http://648290826.r.cdn77.net/wp-content/uploads/2013/02/slider2.jpg') no-repeat;
}
.my-banner:after {
    content:" ";
    height: 200px;
    width: 1024px;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    border: 1px solid black;
    background: -moz-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%);
    /* FF3.6+ */
    background: -webkit-gradient(linear, left top, right top, color-stop(0%, rgba(255, 255, 255, 1)), color-stop(33%, rgba(255, 255, 255, 1)), color-stop(100%, rgba(255, 255, 255, 0)));
    /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%);
    /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%);
    /* Opera 11.10+ */
    background: -ms-linear-gradient(left, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%);
    /* IE10+ */
    background: linear-gradient(to right, rgba(255, 255, 255, 1) 0%, rgba(255, 255, 255, 1) 33%, rgba(255, 255, 255, 0) 100%);
    /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff', endColorstr='#00ffffff', GradientType=1);
    /* IE6-9 */
}
于 2013-08-07T14:20:26.063 に答える
1

Photoshop などのグラフィック デザイン ソフトウェアを使用して画像を使用するか、次のリソースを使用してください: http://www.colorzilla.com/gradient-editor/

これにより、グラデーションに必要な CSS が自動的に作成されます。

于 2013-08-07T14:11:26.770 に答える