Question

正如标题所暗示的那样，我的H2元素背景下面有一个插入阴影的问题，我需要它在元素之上。

我已经将背景图片设置为允许根据所访问网站的页面轻松编辑颜色，任何有关如何使阴影出现在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，谢谢！

Answer 1

我创建了包含阴影的伪后元素：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/

在h2的背景图像/颜色后面插入框阴影，需要它在上面

1 个答案: