我不擅长编码HTML或CSS,但由于没有自己的选择,我被迫设计了一个网站。只要网站看起来有效,网站的实际功能就会受到限制。
我被允许使用Materialise来实现效果和格式化(以及其他任何擅长的功能)。这可能是问题产生的地方。我选择使用Materialise中的carousel来显示页面上的项目以“显示我的能力”等等。这个问题存在的事实可能与此相矛盾。
这个的实现比我预期的要好,但是,我希望在旋转木马上将文字放在所述图像上。每个图像都有不同的文字。我希望文本在一个黑暗的半透明框内,以创建阴影效果并使文本可读。我有以下代码:
.background {
height: calc(100% - 64px);
width: 100%;
background-color: #fdfdfd;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
.carousel-wrapper {
position: relative;
top: 5%;
transform: translateY(-50%);
left: 50%;
transform: translateX(-50%);
max-height: 70vh;
max-width: 70vw;
}
.shadow-box {
position: absolute;
width: 55vw;
height: 55vh;
background-color: rgba(50, 50, 50, 0.5);
z-index: 500 !important;
}
<div class="background">
<div class="carousel-wrapper">
<div class="carousel carousel-slider center" style="z-index: 250 !important;" data-indicators="true">
<div class="carousel-item" href="#one!"><img src="Tree_ropes.jpg">
<div class="shadow-box">
<h2 style="font-weight: bold">Tree Ropes</h2>
</div>
</div>
问题是, shadow-box 应该出现在它的父 carousel-item one 之上,对吗?不是这种情况。当我加载页面时(在Microsoft Edge上) shadow-box 出现在它的父对象后面(你必须删除F12菜单中的图片元素才能看到它)。
答案 0 :(得分:0)
看起来你在错误的地方使用div。
试试这个:
<div class="carousel">
<a class="carousel-item" href="#one!"><img src="Tree_ropes.jpg"></a>
<div class="shadow-box">
<h2 style="font-weight: bold">Tree Ropes</h2>
</div>
</div>
你可以发布其余代码(CSS)或codepen链接吗?需要知道你要用.shadow-box做什么。
答案 1 :(得分:0)
尝试使用此
.background {
height: calc(100% - 64px);
width: 100%;
background-color: #fdfdfd;
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
overflow: hidden;
}
.carousel-wrapper {
position: relative;
top: 5%;
transform: translateY(-50%);
left: 50%;
transform: translateX(-50%);
max-height: 70vh;
max-width: 70vw;
}
.shadow-box {
position: absolute;
width: 55vw;
height: 55vh;
background-color: rgba(50, 50, 50, 0.5);
z-index: 500 !important;
}
.carousel-item {
position: relative;
}
.carousel-item .shadow-box {
position:absolute;
width:100%;
top:0px;
bottom:0px;
z-index:1;
}
<div class="background">
<div class="carousel-wrapper">
<div class="carousel carousel-slider center" style="z-index: 250 !important;" data-indicators="true">
<div class="carousel-item" href="#one!">
<img src="https://thehealthyhive.com/wp-content/uploads/2011/11/linden-tree.jpg">
<div class="shadow-box">
<h2 style="font-weight: bold">Tree Ropes</h2>
</div>
</div>
</div>
</div>
</div>