我有一个这种结构的幻灯片:
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对这些图层重新排序?
谢谢!
答案 0 :(得分:0)
请检查:
<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/