CSS灯光（褪色）效果

我在网上找到了这张照片，我很想在我的网站上做这个效果。 我试图有一个较暗的背景，一盏灯在顶部像在图片和图片下。但我想让它看起来像是从灯上发出的光照在一幅画上。

---

这可能吗

Add不透明度：0.9或不透明度：0.3到您的深色背景图像样式。。

---

希望此帮助的…

添加不透明度：0.9或不透明度：0.3到您的深色背景图像样式。。

---

希望此帮助…

您可以使用透明的png图像，如@Eamonn said，或者在CSS中使用渐变和阴影，如下面的示例所示：

<style type="text/css">
.light {
    width: 200px;
    height: 200px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    box-shadow: 0 20px 20px 5px #fff;
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 1%, rgba(255,255,255,0.7) 66%, rgba(255,255,255,0.79) 76%, rgba(255,255,255,1) 99%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,0.7) 66%,rgba(255,255,255,0.79) 76%,rgba(255,255,255,1) 99%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,0.7) 66%,rgba(255,255,255,0.79) 76%,rgba(255,255,255,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
</style>
<div class="light"></div>

.光{
宽度：200px；
高度：200px；
边界左上半径：50%；
边界右上角半径：50%；
边界左下半径：20%；
边框右下半径：20%；
盒影：0 20px 20px 5px#fff；
背景：莫兹线性梯度（顶部，rgba（255255,0）0%，rgba（255255,0）1%，rgba（255255,0.7）66%，rgba（255255,0.79）76%，rgba（255255,1）99%）/*FF3.6-15*/
背景：-webkit线性梯度（顶部，rgba（255255,0）0%，rgba（255255,0）1%，rgba（255255,0.7）66%，rgba（255255,0.79）76%，rgba（255255,1）99%）；/*Chrome10-25，Safari5.1-6*/
背景：线性梯度（到底部，rgba（255255,0）0%，rgba（255255,0）1%，rgba（255255,0.7）66%，rgba（255255,0.79）76%，rgba（255255,1）99%）；/*W3C，IE10+，FF16+，Chrome26+，Opera12+，Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#00ffffff'，endColorstr='#ffffff'，GradientType=0）；/*IE6-9*/

您可以使用透明的png图像，如@Eamonn said，或者在CSS中使用渐变和阴影，如下面的示例所示：

<style type="text/css">
.light {
    width: 200px;
    height: 200px;
    border-top-left-radius: 50%;
    border-top-right-radius: 50%;
    border-bottom-left-radius: 20%;
    border-bottom-right-radius: 20%;
    box-shadow: 0 20px 20px 5px #fff;
    background: -moz-linear-gradient(top,  rgba(255,255,255,0) 0%, rgba(255,255,255,0) 1%, rgba(255,255,255,0.7) 66%, rgba(255,255,255,0.79) 76%, rgba(255,255,255,1) 99%); /* FF3.6-15 */
    background: -webkit-linear-gradient(top,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,0.7) 66%,rgba(255,255,255,0.79) 76%,rgba(255,255,255,1) 99%); /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom,  rgba(255,255,255,0) 0%,rgba(255,255,255,0) 1%,rgba(255,255,255,0.7) 66%,rgba(255,255,255,0.79) 76%,rgba(255,255,255,1) 99%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); /* IE6-9 */
</style>
<div class="light"></div>

.光{
宽度：200px；
高度：200px；
边界左上半径：50%；
边界右上角半径：50%；
边界左下半径：20%；
边框右下半径：20%；
盒影：0 20px 20px 5px#fff；
背景：莫兹线性梯度（顶部，rgba（255255,0）0%，rgba（255255,0）1%，rgba（255255,0.7）66%，rgba（255255,0.79）76%，rgba（255255,1）99%）/*FF3.6-15*/
背景：-webkit线性梯度（顶部，rgba（255255,0）0%，rgba（255255,0）1%，rgba（255255,0.7）66%，rgba（255255,0.79）76%，rgba（255255,1）99%）；/*Chrome10-25，Safari5.1-6*/
背景：线性梯度（到底部，rgba（255255,0）0%，rgba（255255,0）1%，rgba（255255,0.7）66%，rgba（255255,0.79）76%，rgba（255255,1）99%）；/*W3C，IE10+，FF16+，Chrome26+，Opera12+，Safari7+*/
过滤器：progid:DXImageTransform.Microsoft.gradient（startColorstr='#00ffffff'，endColorstr='#ffffff'，GradientType=0）；/*IE6-9*/

您可以使用一些伪元素来创建此效果，包括线性渐变和变换：

演示[悬停图像以查看效果]

.light{
位置：相对位置；
高度：300px；
宽度：300px；
显示：内联块；
边缘顶部：20px；
}
.light img{/*图像内部*/
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
}
.light:在{/*创建灯泡之前*/
内容：“；
位置：绝对位置；
底部：100%；/*位于图像上方*/
左：50%；
高度：20px；
宽度：100px；
边界半径：50%；
背景：浅灰色；
变换：translateX（-50%）；/*位于图像中心*/
z索引：10；/*位于图像前面*/
边框：2px实心dimgray；/*边框为灯泡添加3D效果*/
边框底部：无；
边框顶部：5px实心#222；
}
.light:在{/*创建光束之后*/
内容：“；
位置：绝对位置；
过渡：全部为0.4s；
身高：0；
宽度：100px；
顶部：-10px；
左：50%；
变换：translateX（-50%）透视（400px）旋转（45度）；/*中心，形成梯形*/
变换原点：顶部中心；
背景：线性渐变（0度，透明，rgba（255，255，255，0.8））；/*增加淡入光线*/
z索引：5；/*位于图像前面，但位于灯泡后面*/
}
.light:hover:after{/*demo only，将其添加到生产中的.light:after*/
身高：80%；
}

---

您可以使用一些伪元素来创建此效果，包括线性渐变和变换：

演示[悬停图像以查看效果]

.light{
位置：相对位置；
高度：300px；
宽度：300px；
显示：内联块；
边缘顶部：20px；
}
.light img{/*图像内部*/
位置：绝对位置；
排名：0；
左：0；
身高：100%；
宽度：100%；
}
.light:在{/*创建灯泡之前*/
内容：“；
位置：绝对位置；
底部：100%；/*位于图像上方*/
左：50%；
高度：20px；
宽度：100px；
边界半径：50%；
背景：浅灰色；
变换：translateX（-50%）；/*位于图像中心*/
z索引：10；/*位于图像前面*/
边框：2px实心dimgray；/*边框为灯泡添加3D效果*/
边框底部：无；
边框顶部：5px实心#222；
}
.light:在{/*创建光束之后*/
内容：“；
位置：绝对位置；
过渡：全部为0.4s；
身高：0；
宽度：100px；
顶部：-10px；
左：50%；
变换：translateX（-50%）透视（400px）旋转（45度）；/*中心，形成梯形*/
变换原点：顶部中心；
背景：线性渐变（0度，透明，rgba（255，255，255，0.8））；/*增加淡入光线*/
z索引：5；/*位于图像前面，但位于灯泡后面*/
}
.light:hover:after{/*demo only，将其添加到生产中的.light:after*/
身高：80%；
}

只需要一个透明的

png

灯光效果，并将其放在图片上方即可显示。非常简单。就像一张只有灯光和灯光的透明图片一样？但如果我将该图片放在图片上方，它会不会覆盖画廊图片？当然不会，如果它是透明的，它只会将效果放在顶部。就像图层一样在photoshop或者别的什么东西里。只要有一个透明的

png

的灯光效果，把它放在你的桌面上就行了