Javascript 如何使用jQuery和CSS在底层准确获取DIV的背景_Javascript_Jquery_Css_Html

Javascript 如何使用jQuery和CSS在底层准确获取DIV的背景

javascript jquery css html

Javascript 如何使用jQuery和CSS在底层准确获取DIV的背景,javascript,jquery,css,html,Javascript,Jquery,Css,Html,我正在寻找一个网页，有一个背景梯度，每几秒钟改变颜色和过渡之间的混合。现在，我想将此效果应用于由具有坚实背景的元素阻止的上部元素为了给你一个更好的例子，我附上了一个简单的模型，希望你能理解我的意图，我愿意接受建议问题显然是包含黑色背景的块，任何使用PNG透明的块都会看到黑色而不是渐变到目前为止，我将包括示例代码： <body>

我正在寻找一个网页，有一个背景梯度，每几秒钟改变颜色和过渡之间的混合。现在，我想将此效果应用于由具有坚实背景的元素阻止的上部元素

为了给你一个更好的例子，我附上了一个简单的模型，希望你能理解我的意图，我愿意接受建议

问题显然是包含黑色背景的块，任何使用PNG透明的块都会看到黑色而不是渐变

到目前为止，我将包括示例代码：

<body><!-- A Jquery script will be used to add CSS background, Easy stuff -->
<div class="blackbox">
    <div class="logo"><img src="#" alt=""></div>
    <hr class="h-line">
    <div class="v-line"> </div>
</div>

所以我想要的是：

一种已知的jQuery方法，用于获取背景图像，但它需要能够引用渐变的位置，以便其与背景对齐
一个更好的解决方案，让这个工作，请赤裸裸的记住，该网页需要有响应，所以我可以使用其他方法，但由于它的响应，我想不出任何

我能看到这种效果的唯一方法是，如果您的黑色div没有背景，并且被切割成每个都有背景的部分。公司名称区域需要与其他div部分的背景具有相同的前景色。根据您的布局需要，这可能很好

例如，您可以将其剪切为三个部分和两个图像：

您可以尝试将背景大小和背景位置与javascript结合使用：

setGradientSizes = function (el) {
var width = $(document).width() + 'px', height = $(document).height() + 'px';
$(el || '.gradient:not(body)').each(function () {
    var offset = $(this).offset();
    $(this).css('background-size', width + ' ' + height);
    $(this).css('background-position', (offset.left * -1) + 'px ' + (offset.top * -1) + 'px');
})};

此处的工作示例->

注:

这不是100%跨浏览器-FF4.0+、IE9.0+、Opera 10.0+、Chrome 1.0+、Safari 3+支持背景大小
对于一些较旧的浏览器，您可以尝试使用特定于浏览器的前缀（如-moz-background-size）——我的示例不包括这一点
为了减少负载闪烁，可以先应用计算，然后添加背景渐变

因为您需要jQuery解决方案的替代方案您可以使用

边距

和关键帧动画播放一点

此方向的形状（取决于您想用哪个零件做什么-添加内容…以及您希望它以何种方式响应）：

html:

<div class="wrapper">
    <div class="header"><img src="http://i.imgur.com/CUbOIxr.png" alt="Company name" /></div>
    <div class="content"></div>
</div>

body {
    background:orange;
    width:100%;
    height:100%;
}
.wrapper {
    width:40%;
    height:90%;
    border:30px solid #000;
    border-right-width:100px;
    border-bottom-width:100px;
}
.header {
    width:100%;
    border-bottom:10px solid transparent;
    -webkit-box-shadow: 0 30px 0 #000;
    -moz-box-shadow: 0 30px 0 #000;
    box-shadow: 0 30px 0 #000;
}
.header img {
    width:100%;
}
.content {
    width:95%;
    height:400px;
    background-color:#000;
    margin-top:30px;
}

div { color: green; }

form div { color: red; }

form div div.content { color: green; }

div.content {
  all: default;
}

这样就不需要javascript了。对于背景，你可以使用一个和做所有的动画与css或。您还需要根据自己的需要调整边线和框阴影的长度，或者添加一些@media查询

希望这能帮助您朝着正确的方向发展=）

更新：我希望梯度变化是个小问题；-）对不起，我真傻

我将详细阐述我对动画的CSS唯一建议，但是如果您不喜欢CSS3解决方案，您可以选择javascript滑块作为背景动画-尽管这是现在最热门的东西；-）

嗯。因此，我会添加一些更固定的元素和渐变背景（layer1和layer2）

要立即在html中具有此方向的内容，请执行以下操作：

<div class="layer layer1"></div>
<div class="layer layer2"></div>
<div class="wrapper">
    <div class="header">
        <img src="http://newtpond.com/test/company-name.png" alt="Company name" />
    </div>
    <div class="content"></div>
</div>

（在Chrome 26中测试-看起来很酷=）

这就是我现在可以告诉你的CSS唯一的方法。还有一些东西需要修改和考虑浏览器兼容性。但这肯定是另一种选择。。。向html5和css3的发展方向迈出了一步（如果你想变得又热又酷；-），呵呵，对不起，太愚蠢了

祝你好运

更新2：因此，我稍微克服了我的懒惰，在最上面的示例中添加了一些供应商前缀（当然，您可以使用任何图像作为背景）：

这里我添加了另一个例子，使用png图像作为渐变，在背景中上下滑动（作为另一种选择）：

有很多方法可以做到这一点，CSS3和图像已经被推荐，所以我建议使用画布

HTML画布元素内置了您需要的所有内容。它允许渐变背景填充，并且可以屏蔽形状和文本，在背景中创建剪切，使真正可变的HTML元素在彩色背景下真正透明。它的伸缩性也很好，并且可以很容易地做出响应

除了InternetExplorer8和更低版本之外，所有主要浏览器都支持canvas元素，这意味着浏览器支持优于前面提到的许多CSS3方法，如关键帧和背景大小

使用回退，比如说，如果画布不可用，图像会淡入淡出，这应该不是很难理解，在除Internet Explorer 9版以下的所有其他浏览器中，在画布中创建渐变背景和文本遮罩不需要图像，这应该会使页面的加载速度大大加快

要检测是否支持画布，您可以使用此方便的功能：

function isCanvasSupported(){
  var elem = document.createElement('canvas');
  return !!(elem.getContext && elem.getContext('2d'));
}

这样使用：

if ( isCanvasSupported() ) {
    // do canvas stuff
}else{
    // fall back to images
}

$(function() {
    gradSite.init(); // starts the canvas stuff
});

那么，让我们开始吧！为了创建一个“最后手段”回退和一些我们可以“克隆”到画布中的元素，我们将在HTML中创建我们需要的元素，以获得与您在问题中概述的结构类似的结构。这样做的另一个好处是，可以只更改一些CSS，也可以在画布中进行更改：

<div id="gradient">
    <div class="text">COMPANY NAME</div>
    <div class="h_bar"></div>
    <div class="v_bar"></div>
</div>

没有任何看起来完全一样的javascript，它应该有一定的响应性，并适应窗口大小

现在我们需要一些javascript将这些元素转换为画布中的内容。我们将创建两个画布元素，一个用于背景，因为我决定在随机渐变之间连续设置背景动画，另一个用于内部黑框和内容（文本和条）

由于文本和条的掩蔽可能有点慢，我们不必重新绘制所有内容，只需重新绘制背景画布，因为前景是相当静态的。这也避免了在某些具有高fram的浏览器中出现闪烁问题

$(function() {
    gradSite.init(); // starts the canvas stuff
});

div { color: green; }

form div { color: red; }

form div div.content { color: green; }

form div.sub { color: red; }

form div div.content { /* remains green */ }

div.content {
  all: default;
}