CSS光（褪色）效果

Question

我在互联网上找到了这张照片，我很想在我的网站上做这个效果。 我想要一个更暗的背景，顶部的灯像照片上面和下面的图片。但我希望它看起来就像灯光照在一张照片上。 这可能吗？

Answer 1

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

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

.light {
  position: relative;
  height: 300px;
  width: 300px;
  display: inline-block;
  margin-top: 20px;
}

.light img {/*Image inside*/
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 100%;
}

.light:before {/*creates the bulb*/
  content: "";
  position: absolute;
  bottom: 100%;/*places above image*/
  left: 50%;
  height: 20px;
  width: 100px;
  border-radius: 50%;
  background: lightgray;
  transform: translateX(-50%);/*places in center of image*/
  z-index: 10;/*places in front of image*/
  border: 2px solid dimgray;/*borders add 3D effect to bulb*/
  border-bottom: none;
  border-top: 5px solid #222;
}

.light:after {/*creates the beam*/
  content: "";
  position: absolute;
  transition: all 0.4s;
  height: 0;
  width: 100px;
  top: -10px;
  left: 50%;
  transform: translateX(-50%) perspective(400px) rotateX(45deg);/*centers, makes as trapezium*/
  transform-origin: top center;
  background: linear-gradient(0deg, transparent, rgba(255, 255, 255, 0.8));/*adds fading light*/
  z-index: 5;/*places in front of image, but behind bulb*/
}

.light:hover:after {/*demo only, add this to .light:after in production*/
  height: 80%;
}

<div class="light">
  <img src="http://lorempixel.com/300/300" />
</div>

Answer 2

将不透明度：0.9; 或不透明度：0.3; 添加到较暗的背景图片样式中.. 希望这有帮助...

Answer 3

您可以使用像@Eamonn这样的透明png图像，或者在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>