CSS внутренняя тень

У меня проблема с внутренней тенью css.CSS внутренняя тень

Я создал это DEMO из codepen.io

Таким образом, проблема заключается в том, что внутренняя тень на изображении не может быть displayed.You будет увидеть, если вы нажмете на демонстрационной ссылке в нижней части изображения не может отображаться внутренняя тень.

Как я могу видеть внутреннюю тень на изображении?

HTML:

body { 
 
    background-color: #323949; 
 
    font-family: 'mstfont' !important; 
 
    margin: 0px; 
 
    padding: 0px; 
 
    min-width: 100%; 
 
    float: left; 
 
    height: 100%; 
 
    -webkit-backface-visibility: hidden; 
 
} 
 
.globalHeader { 
 
    z-index: 90; 
 
    background-color: #323949; 
 
    position: fixed; 
 
    width: 100%; 
 
    border-bottom: 1px solid #3f4858; 
 
    color: #fff; 
 
    font-size: 40px; 
 
    font-family: arial, sans-serif; 
 
    -webkit-box-shadow: 0px 0px 5px #000000; 
 
    -moz-box-shadow: 0px 0px 5px #000000; 
 
    box-shadow: 0px 0px 5px #000000; 
 
} 
 
.globalHeader_in { 
 
    z-index: 99999; 
 
    -webkit-box-sizing: border-box; 
 
    -moz-box-sizing: border-box; 
 
    box-sizing: border-box; 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    user-select: none; 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
    position: relative; 
 
    min-width: 960px; 
 
    width: 100%!important; 
 
    max-width: 1580px; 
 
    height: 52px; 
 
    left: 0; 
 
    top: 0; 
 
    padding: 0 20px 0 15px; 
 
    margin: auto; 
 
} 
 
.profil-kapak { 
 
    width: 100%; 
 
    height: 385px; 
 
    border-bottom: 1px solid #3f4858; 
 
    -moz-box-shadow: inset 0 0 5px #000000; 
 
    -webkit-box-shadow: inset 0 0 5px #000000; 
 
    box-shadow: inset 0 0 5px #000000; 
 
} 
 
.image { 
 
    margin: 0px auto; 
 
    width: 900px; 
 
    height: 385px; 
 
    overflow: hidden; 
 
} 
 
.image img { 
 
    width: 100%; 
 
}

<div class="globalHeader"> 
 
    <div class="globalHeader_in">header</div> 
 
</div> 
 
<div class="profil-kapak"> 
 
    <div class="image"> 
 
    <img src="http://www.designbolts.com/wp-content/uploads/2013/11/Frozen-Movie-poster-payoff-Wallpaper-HD1.jpg"> 
 
    </div> 
 
</div>

источник

2015-01-12 innovation

Вы не можете добавить внутреннюю тень к изображению. Вместо того, что вы можете сделать, это установить родительский .image для positon:relative и создать накладку набор для position:absolute, который имеет бокс-тень:

HTML

<div class="image"> 
    <div class="overlay"></div> 
    <img src="..."></div> 
</div>

CSS

.overlay{ 
    width: 100%; 
    height: 100%; 
    position: absolute; 
    top: 0; 
    left: 0; 
    -moz-box-shadow: inset 0 0 10px #000000; 
    -webkit-box-shadow: inset 0 0 10px #000000; 
    box-shadow:   inset 0 0 10px #000000;  
}

(переключается на скрипку, им только что пригодится):

FIDDLE

источник

2015-01-12 02:56:10 jmore009

я не хочу, чтобы добавить еще один DIV для тени. Я спрашиваю, как я могу показать внутреннюю тень '.profil-kapak' на изображении. – innovation

Извините, что должен был сказать вам ** CANT **. Это невозможно сделать, единственный способ сделать это так, или вы отредактируете изображение в фотошопе или что-то – jmore009

, что изображение является фотографией обложки для пользователя :) Таким образом, пользователям не нужно использовать Photoshop. – innovation

.img-shadow { 
 
    position: relative; 
 
    display: inline-block; 
 
} 
 
.img-shadow::after { 
 
    position: absolute; 
 
    top: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    left: 0; 
 
    box-shadow: 0 0 10px 14px rgba(90,0,90,0.65) inset; 
 
    content: ""; 
 
} 
 
.img-shadow>img { 
 
    vertical-align: top; 
 
}

<span class="img-shadow"> 
 
    <img width=280px; src="http://www.accordionplus.ru/wp-content/uploads/2014/10/1_web_mini.jpg"> 
 
</span>

источник

2015-01-12 03:18:08

CSS внутренняя тень

ответ

Смежные вопросы