Question

我有一个这种结构的幻灯片：

Carousel

Slide具有背景渐变样式，但渐变在图像和标题上都会运行。我希望它只能覆盖图像，因此文本在顶部保持亮白色。

我在Drupal工作，没有添加或更改div的奢侈。我尝试使用z-index而无处可去。我尝试将背景样式移动到@Test public void example(@Mocked final DataAccessLayer<UtilClass> mock) { final UtilClass data = new UtilClass(123); new Expectations() {{ mock.getData(UtilClass.class, 1); result = data; }}; int result = new ServiceLayer().testingMethode(); assertEquals(123, result); }和图像，但它不会显示。

如何仅使用CSS对这些图层重新排序？

谢谢！

Answer 1

请检查：

<div id="carousel">
    <div class="slide">
        <img src="http://images.all-free-download.com/images/graphiclarge/daisy_pollen_flower_220533.jpg">
        <h3>caption</h3>
    </div>
</div>

CSS：

#carousel{/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#87e0fd+0,53cbf1+40,05abe0+100;Blue+3D+%23+16 */
background: #87e0fd; /* Old browsers */
background: -moz-linear-gradient(top,  #87e0fd 0%, #53cbf1 40%, #05abe0 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom,  #87e0fd 0%,#53cbf1 40%,#05abe0 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#87e0fd', endColorstr='#05abe0',GradientType=0 ); /* IE6-9 */
height:300px;width:600px
}
img{width:20%}

JSFIDDLE：https://jsfiddle.net/m46doct1/4/

覆盖父div的z-index？

1 个答案: