0

タイトルが示すように、H2 要素の背景の下にあるインセット ボックスの影に問題があるため、要素の上にある必要があります。

http://jsfiddle.net/9QYT4/

訪問したサイトのページに応じて色を簡単に編集できるように背景画像を設定しました。h2 の上に影を表示する方法についてのヘルプをいただければ幸いです。

また、pngグラデーションでもこのようなことをすることは可能でしょうか? 右側にのみ影を付けようとしているので、それがより良い解決策になります（ただし、上部と下部にも表示されます）

SASS

#region-postscript-second {
width:300px;
background:#fff;
margin: 20px;
box-shadow: inset -6px 0 10px rgba(0, 0, 0, 0.15);
h2 {
    background: url('http://vt.lexcorp.ca/sites/all/themes/vermont/img/middle-heading-bg.png') center center no-repeat #8CCC1B;
    font-size:20px;
    text-transform:uppercase;
    font-weight:normal;
    color:#646567;
    text-align:center;
}}

JSfiddle で HTML を表示してください。

4

1 に答える 1

2

あなたの影を含む要素の後に擬似を作成しました: http://jsfiddle.net/jPUX3/

#region-postscript-second:after{
    content: " ";
    display: block;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%; width: 14px;
    box-shadow: inset -14px 0 8px -8px rgba(0, 0, 0, .25);
}

そして #region-postscript-second に追加しました:

position: relative;

最後に、片側のボックス シャドウについて説明します - http://css-tricks.com/snippets/css/css-box-shadow/

于 2013-03-04T15:50:15.663 に答える