作为一种学习媒介，我尝试复制我在 Internet 上看到的一些东西。我的一个 friend 知道我在做什么，看到了 template并要求我为他的网页复制其中的一部分，我已经从模板中获得了大部分我需要的东西，但他最喜欢的东西我尝试过但失败了，我不明白这个模板中涉及的魔力是什么。 ..
我需要的是复制主片透明度和它背后的光效，我制作的透明度是用 GIMP 制作的黑色 1x1 png(我买不到 Photoshop)我也有一个不错的图案，比如在模板中，因为这是我 friend 问的事情之一......
这就是我想要的效果，我试着弄乱了阴影，但没有得到我想要的结果我最终删除了代码，现在我只有这个:
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，或者这是否有助于提高页面性能...
最佳答案
您可以在此处执行一些 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;
}
关于css - 复制具有透明度的灯光效果，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/14397339/