NB私はすでにこの投稿を見てきましたが、それをエミュレートすることはできません. ブリティッシュ カウンシル スウェーデンのサイトで影を複製しようとしています。
これは、私が自分のサイトにアクセスできた限りです。
まだ画像を投稿できませんが、HTML は次のように構成されています。
<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>
既存の 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;
}