Question

我正在使用透明的png文件作为我的h2和h4元素的背景，它底部有一个阴影，我想在特色图片上显示，就像你看到的那样在这里：https://redpen.io/epqvnw

现在，在网站http://www.mediray.co.nz/preview上，h2背景被裁剪。我已经详尽地使用了检查元素。在某些时候，我可以把它放在顶部，但它降低了页面上每个其他元素的不透明度。我正在使用background-color: rgba(0,0,0,0.6);作为我的网站内部，我猜他们一定是冲突。

非常感谢任何帮助或指示。如果我不够清楚或者您需要更多信息，请告诉我。

Answer 1

在position: relative的第z-index: 1行添加dynamik.css和1457

#ez-home-container-wrap .ez-widget-area h4,
#ez-home-slider-container-wrap .ez-widget-area h4 {
    border-bottom: 0px solid #DDDDDD;
    color: #838383;
    font-family: 'Open Sans', sans-serif;
    font-size: 22px;
    font-size: 2.2rem;
    position: relative;
    z-index: 1

}

Answer 2

我建议在图像上使用反转框阴影，创建由标题投射的阴影的错觉。像这样：

box-shadow: inset 0px 10px 5px -5px rgba(50, 50, 50, 0.75);

jsfiddle：http://jsfiddle.net/jtFb8/

或者如果您不想使用CSS3，则将阴影放在图像的顶部而不是标题的背景。

h2 h4标题图形需要在图像上投下阴影

2 个答案: