- html - 出于某种原因,IE8 对我的 Sass 文件中继承的 html5 CSS 不友好?
- JMeter 在响应断言中使用 span 标签的问题
- html - 在 :hover and :active? 上具有不同效果的 CSS 动画
- html - 相对于居中的 html 内容固定的 CSS 重复背景?
对我认为的问题进行简单的任务,也许只需要另一双眼睛。
我们有一张横幅图片,右边是一台电脑显示器。 “屏幕”已被切掉,因此横幅的一部分是透明的 (.PNG)。
我需要在剪切图像后面放置一个旋转木马,这样给人的印象是旋转木马正在屏幕上“播放”。
现在我正在尝试用 Slick Carousel 来做到这一点但如果其他人有更好的旋转木马的建议,我很乐意接受。
http://codepen.io/tconroy/pen/ZYRaRd
以上是我目前所拥有的代码笔——我遇到的主要问题是幻灯片在图像内容的前面(重叠图像),当它应该在图像内容的后面(在横幅,并且只能通过屏幕上的透明“间隙”看到)。
我为幻灯片使用了占位符图像,但这些是我们将使用的每张图像的实际尺寸。图像应在幻灯片中“居中”,背景颜色可见。 (基本上图像被叠加到彩色幻灯片上)。
HTML
<div class="inner-wrap">
<header>
<div class="contain-to-grid">
<div class="inner-carousel-wrapper">
<div class="inner-carousel">
<div class="slide yellow">
<img class="" src="http://lorempixel.com/350/347/sports" alt="">
</div>
<div class="slide purple">
<img class="" src="http://lorempixel.com/416/347/abstract" alt="">
</div>
<div class="slide red">
<img class="" src="http://lorempixel.com/381/346/city" alt="">
</div>
<div class="slide blue">
<img class="" src="http://lorempixel.com/338/346/transport" alt="">
</div>
<div class="slide green">
<img class="" src="http://lorempixel.com/343/347/nature" alt="">
</div>
<div class="slide orange">
<img class="" src="http://lorempixel.com/361/347/cats" alt="">
</div>
</div> <!-- .inner-carousel -->
<img src="http://i.imgur.com/HodKXD4.png">
</div> <!-- .inner-carousel-wrapper -->
</div>
</header>
</div>
<section class="container">
Notice how the "slides" above are overlapping the ipad square (bottom right of monitor)? The slides should appear "behind" the ipad.
</section>
SCSS
$lesson-blue: #33B2E6;
$lesson-green: #26B789;
$lesson-orange: #F58231;
$lesson-yellow: #FFD648;
$lesson-red: #E43533;
$lesson-purple: #616373;
.inner-carousel-wrapper {
background: black;
}
.inner-carousel {
position: absolute;
float: right;
margin-left: 54.3%;
margin-top: 6.0%;
width: 45.7%;
height: 76%;
}
.inner-carousel .slide {
&.blue {background: $lesson-blue; }
&.green {background: $lesson-green;}
&.orange {background: $lesson-orange;}
&.yellow {background: $lesson-yellow;}
&.red {background: $lesson-red;}
&.purple {background: $lesson-purple;}
img {
margin: 0 auto;
padding: 6%;
width: 60%;
}
}
JS
$('.inner-carousel').slick({
accessibility: false,
autoplay: true,
autoplaySpeed: 2500,
arrows: false,
draggable: false,
slide: '.slide'
});
最佳答案
我不确定这是否适合您,但您可以为背景图像分配一个 id
,为其指定绝对定位,然后更改其 z-index。这样的事情应该有效:
HTML
<img id="bg" src="http://i.imgur.com/HodKXD4.png">
CSS
#bg {position:absolute;z-index:2;}
关于html - PNG图像中透明切口后面的旋转木马,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/28770703/
有没有办法像下面的示例那样使用 CSS3 在 div 中创建一个切口? 我想要做的是在 2 个 divs 之间创建一个切口作为图像。被切掉的实际 div 是底部的 div,它有一个 backgroun
我想使用 CSS 制作类似于下图的内容: 我完全不知道该怎么做。有人可以帮忙吗? 最佳答案 这可以使用两个元素或一个元素和一个伪元素来完成: HTML: CSS: div { position:re
当从设备显示设置启用全屏并且手机底部有一个圆形边缘时,我在底部的按钮会剪掉一点。我找到了一些关于缺口切口的引用,但找不到底部切口。 解决方案假设:底部边距 >> 不满足我的 XD 要求。我的按钮应该在
我几乎明白了,但我被困在一件事上。我正在尝试使子 p 标签与父 div 的宽度和高度保持一致。我只是不知道如何让 p 元素比父 div 稍微小一点(我相信是 4px),以便显示右边框和底边框。看看这个
我已经读过这个很好的问题了Transparent hollow or cut out circle但我想画更多的圆圈(比方说三个)。 所以我尝试为圆使用额外的元素而不是伪元素(这样我可以添加更多)并且
我是一名优秀的程序员,十分优秀!