CSS光（フェージング）私はインターネット上でこの絵を発見し、私は私のウェブサイト上でこの効果を行うのが大好きだ

Question

をもたらします。 私は暗い背景、写真の上のような上部のランプとその下の絵を持っているようにしようとしています。しかし、ランプからの光が写真に輝いているように見えます。 これは可能ですか？

Answer 1

不透明度：0.9;または不透明度：0.3;あなたの暗い背景画像スタイルには... ・ホープ、このヘルプの...

Answer 2

@Eamonnは、以下のサンプルのようにCSSで言ったり、使用勾配と影のようにあなたは、透過PNG画像を使用することができます。

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

Answer 3

あなたは直線勾配を含むと変換し、この効果を作成するために、いくつかの擬似要素を使用することができます。

デモ[効果を確認するにはホバー画像]

.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>