以透明度複製燈光效果

作爲學習的媒介我嘗試複製我在互聯網上看到的一些東西。我的一位知道自己在做什麼的朋友看到template，並要求我將其中的一部分複製到他的網頁上，我已經擁有了模板所需的大部分內容，但他最喜歡的東西是我嘗試過並失敗了我不明白什麼是在這個模板中涉及的魔術......以透明度複製燈光效果

我需要的是複製主板透明度和它背後的光線效果，我做的透明度是一個黑色的1x1 PNG GIMP（我不能買的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，或者是否會在頁面的表現幫助...

來源

2013-01-18 Fernando Andrade

有在畫面的幾個特效，是你的背景紋理之後，或者光線到黑暗的過渡？這也可能有助於看到原始部分的鏡頭，以幫助您解決問題。 – Kyle

紋理是我的，我想從燈光到黑暗的過渡，謝謝 –

：

CSS完成後，我創建了一個新的投影，放置了一個陰影屏幕（左：100％）的e和陰影澆鑄到中心與顏色#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-23 16:00:09

有一些CSS3的東西，你可以在這裏做。

你需要做的第一件事是用紋理和高光設置div。最理想的div應該是紋理div的孩子。

HTML：

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

接下來你需要應用的特效和背景，以正確的元素：我設法得到它

.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-18 10:59:13 Kyle

我試過了，但是我們可以看到div下的燈光過渡，如果你在模板鏈接中看到有可能看到div下的漸變，就像if該div是照亮背景，我們可以告訴幾乎在哪裏光源，這是一個非常好的和聰明的把戲，這就是爲什麼我尋求幫助，所以我可以學習更多:) –

你只需要調整rgba和box-shadow屬性。此外，你可以添加一個非常微妙的徑向漸變內部div本身，但支持這一點很低。 – Kyle

但是有可能會說影子會從div內部開始傳播到外部？ –

以透明度複製燈光效果

回答

相關問題