Question

我的问题是，如何从白色到透明创建这个gardient，将图像部分覆盖在左侧。

我的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>

干杯，斯蒂芬

Answer 1

使用Photoshop等图形设计软件并使用图像，或使用以下资源：http://www.colorzilla.com/gradient-editor/

这将自动创建渐变所需的CSS。

Answer 2

试试这个：

FIDDLE

<强> 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 */
}

使用渐变不透明度叠加创建横幅

2 个答案: