Question

我想做http://mountaintheme.com/themeforest/mountain/home.html之类的事情，而我根本不确定如何解决这个问题。我尝试过一些使用CSS的方法，但是失败了。这似乎是一个我想象的简单修复......

这是我目前的代码，

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Sound Off</title>
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">


<style>
    body {
        background-color: rgb(255, 255, 255);
        color: #000;
    }

    a {
        color: #fff;
    }

    a:hover {
        color: #fff;
    }

    hr {
        border-top-color: #fff;
    }

    .main {
        opacity: 0.6;
        max-width: 640px;
        margin: 150px auto;
        padding: 0px 15px;
        height:2048px;
    }

    .page-header {
        border-bottom: 3px #fff solid;
    }

    footer .accr {
        text-align: right;
    }

    @media (max-width: 767px) {
        .clearfix div {
            width: 100%;
        }

        .rgb, .accr {
            text-align: center !important;
        }
    }

</style>

</head>
<body>


<div class="main">
<h1 class="page-header"></h1>
<p style="font-family:'Helvetica'"></p>
</div>


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script id="colorScroll" data-colors="255, 255, 255:255, 255, 204:204, 255, 255">

var colors = $("#colorScroll").data("colors");
var colors_array = colors.split(":");
var numcolors = colors_array.length;

var RGBs = [];
for(var i = 0; i < numcolors; i++) {
    RGBs[i] = [];
    var c = colors_array[i].split(",");

    RGBs[i][0] = c[0];
    RGBs[i][1] = c[1];
    RGBs[i][2] = c[2];
}

var dRGBs = [];
for(var i = 0; i < (numcolors - 1); i++) {
    dRGBs[i] = [];

    dRGBs[i][0] = RGBs[i][0] - RGBs[i+1][0];
    dRGBs[i][1] = RGBs[i][1] - RGBs[i+1][1];
    dRGBs[i][2] = RGBs[i][2] - RGBs[i+1][2];
}

$(window).scroll(function() {
    var position = $(this).scrollTop();
    var view = $(this).height();
    var height = $(document).height();

    var travel = height - view;
    var percent = position / travel;
    var level = Math.floor(percent * (numcolors - 1));
    var plevel = percent * (numcolors - 1);

    var dlevel = Math.floor(level);
    if(Math.floor(level) == (numcolors - 1)) {
        dlevel = Math.floor(level) - 1;
    }

    if(plevel > 1) {
        plevel = plevel - dlevel;
    }

    var nRed = (RGBs[dlevel][0] - Math.round(dRGBs[dlevel][0] * plevel));
    var nGreen = (RGBs[dlevel][1] - Math.round(dRGBs[dlevel][1] * plevel));
    var nBlue = (RGBs[dlevel][2] - Math.round(dRGBs[dlevel][2] * plevel));

    $(".rgb span").text(nRed + ", " + nGreen + ", " + nBlue);
    $("body").css("background-color", "rgb(" + nRed + "," + nGreen + "," + nBlue + ")");

});

</script>
</body>
</html>

Answer 1

这是你可以通过google crome下载的gif图片。

您可以从这里下载。 Click Here

Answer 2

这是jpeg图片，你可以从那里看到页面资源 - http://mountaintheme.com/themeforest/mountain/demo/bg.jpg Dotted效果可能是用photoshop或其他东西制作的，然后才保存。

如何在背景中添加虚线叠加层？

2 个答案: