/ / Jak wyciszyć cień pola w CSS? - css, obraz w tle, gradient, zanikanie, css3

Jak wygasić cień pola w CSS? - css, obraz w tle, gradient, zanikanie, css3

N.B. Już na to patrzyłem ten post i nie mogę go emulować. Próbuję replikować cień na British Council Szwecja teren:

To tyle, ile udało mi się osiągnąć moja własna strona:

Nie mogę jeszcze publikować zdjęć, ale kod HTML ma następującą strukturę:

<div id="inner">
<!--Full width div, blue bar of color here-->

<div class="wrap">
<!--Existing gradient background image here-->

<div id="content-wrapper">
<!--Content begins-->
</div>

</div>

</div>

Istniejący CSS:

#inner{
background: #1e5799;
background: -moz-linear-gradient(top,  #1e5799 0%, #0057be 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#1e5799), color-stop(100%,#0057be));
background: -webkit-linear-gradient(top,  #1e5799 0%,#0057be 100%);
background: -o-linear-gradient(top,  #1e5799 0%,#0057be 100%);
background: -ms-linear-gradient(top,  #1e5799 0%,#0057be 100%);
background: linear-gradient(to bottom,  #1e5799 0%,#0057be 100%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#1e5799", endColorstr="#0057be",GradientType=0 );
background-size: 1px 100px;
background-repeat: repeat-x;
margin: 0 auto;
overflow: hidden;
padding: 20px;
position: relative;
}

#inner .wrap {
background: -moz-linear-gradient(top,  rgba(0,0,0,0.25) 0%, rgba(0,0,0,0) 45%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(0,0,0,0.25)), color-stop(45%,rgba(0,0,0,0)));
background: -webkit-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 45%);
background: -o-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 45%);
background: -ms-linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 45%);
background: linear-gradient(top,  rgba(0,0,0,0.25) 0%,rgba(0,0,0,0) 45%);
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr="#a6000000",endColorstr="#00000000",GradientType=0 );
border-radius: 10px;
}

#content-sidebar-wrap {
background: #fff;
float: left;
margin: 1em;
}

Odpowiedzi:

1 dla odpowiedzi № 1

spróbuj tego może być pomocne

PRÓBNY