धुंधला मैं इस तरह कुछ करने के लिए कोशिश कर रहा हूँ सीएसएस

Question

के माध्यम से छवि पर सीमाओं:

मैं इसे एक पारदर्शी केंद्र के साथ यह ऊपर पृष्ठभूमि छवि और एक और छवि (मुखौटा) का उपयोग किया जा सकता है लगता है। लेकिन क्या शुद्ध सीएसएस के साथ ऐसा करना संभव है?

Answer 1

जबकि आप एक box-shadow सीधे के लिए एक छवि आप एक :before or :after

HTML के साथ यह लागू हो सकते हैं लागू नहीं कर सकते

<div class="shadow"> 
      <img src="http://lorempixel.com/400/200/" /> 
    </div> 

सीएसएस

.shadow 
{ 
    display:block; 
    position:relative; 
} 

img { 
    width: 100%; 
    height: 100%; 
} 

.shadow:before 
{ 
    display:block; 
    content:''; 
    position:absolute; 
    width:100%; 
    height:100%; 
    -moz-box-shadow:inset 0px 0px 3px 1px rgba(0,0,0,1); 
    -webkit-box-shadow:inset 0px 0px 3px 1px rgba(0,0,0,1); 
    box-shadow:inset 0px 0px 3px 1px rgba(0,0,0,1); 
} 

Answer 2

Yess यह संभव है इस तरह:

.img { 
border:1px solid black; 
} 
.img:hover { 
border: none; 
box-shadow: 0 0 10px black inset; 
}