0

作为一种学习媒介，我尝试复制我在互联网上看到的一些东西。我的一个朋友知道我在做什么，看到一个模板并要求我为他的网页复制其中的一部分，我已经从模板中获得了我需要的大部分内容，但他最喜欢的东西我尝试过但失败了而且我不明白这个模板所涉及的魔法是什么......

我需要的是复制主表透明度及其背后的光效，我制作的透明度是在 GIMP 上制作的黑色 1x1 png（我买不到 Photoshop）我也有一个很好的图案，就像在模板中一样因为这是我朋友问的事情之一...

用 GIMP 制作的带光效的透明盒子

这是我想要的效果，我试着弄乱阴影，但没有得到我想要的我最终删除了代码，现在我只有这个：

HTML：

 <body>
 <div id="box"></div>
 <div id="light"></div>

CSS：

#light{
border:solid 0px white;
height:550px;
width:800px;
left:50%;
margin-top:130px;
margin-left:-400px;
z-index:-1000;
position:absolute;
box-shadow: 0px 0px 300px #929292;
border-radius:100px;
background-color:#929292;
opacity:0.4;
}
#box{
background-image:url(../images/shtr.png);
margin:0px auto 0px;
width:1060px;
height:auto;
border:solid 0px white;
}

我不知道我是否需要使用 jquery 或 javascript，或者这是否有助于提高页面性能...

4

2 回答 2

1

你可以在这里做一些 CSS3 的事情。

您需要做的第一件事是使用纹理和高光设置 div。理想情况下，带有突出显示的 div 应该是纹理 div 的子级。

HTML：

<div class="wrap">
  <div class="transp"></div>
</div>

接下来，您需要将效果和背景应用于正确的元素：

CSS：

.wrap
{
  background: url(http://wallpoper.com/images/00/35/83/02/pattern-patterns_00358302.jpg);
  height: 500px;
  width: 500px;
}

.transp
{
  position: relative;
  top: 20px;
  left: 30px;
  background: rgba(0, 0, 0, .7);
  height: 100px;
  width: 100px;
    box-shadow: 0px 0px 30px #fff;
}

http://jsfiddle.net/7fTAH/

于 2013-01-18T10:59:13.413 回答
0

我设法完成它，我创建了一个投射阴影的新 div，将其放置在屏幕之外（左：100%;），阴影被投射到中心，颜色为 #CECECE HTML 代码：

<div id="light"></div>
<div id="box">
    ( ... content ... )
</div>

在 CSS 中：

#light{
position: absolute;
background: rgba(0, 0, 0, 0);
height: 800px;
width: 840px;
z-index:-1000;
opacity:0.15;
}  

#box{
background-image:url(../images/shtr.png);/*black 50-60% transparent 1x1 image*/
margin:0px auto 0px;
width:1060px;
height:auto;
border:solid 0px white;
}

为了投射阴影，我使用了一个 jQuery 脚本，仅通过 css 它不起作用我不知道到底为什么......代码：

$(document).ready(function() {
    myWidth = window.innerWidth;
    myHeight = window.innerHeight;

    var A = -myWidth - 49.5*myWidth/60
    $("#brilho_grande").css("box-shadow", A+"px 0px 10000px 100px #CECECE");
    $("#brilho_grande").css("left", 2*myWidth+"px");
    $("#brilho_grande").css("top", "339px");
});
于 2013-01-23T16:00:09.887 回答