Question

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

我需要的是复制主要的纸张透明度和它背后的光效，我制作的透明度是在GIMP上制作的黑色1x1 png（我买不到Photoshop）我也有一个漂亮的模式在模板中，因为这是我朋友问的事情之一......

transparent box with light effect made with the 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，或者这对页面性能有帮助...

Answer 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/

Answer 2

我设法完成它，我创建了一个投射阴影的新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");
});

使用透明度复制光效

2 个答案: