如何使用不透明度控制将 bootstrap carousel-caption 设置为像渐变背景一样的样式?
浏览器渲染看起来是这样的
好的,这就是我正在处理的旋转木马。我想将 carousel-caption 调整为这样的东西(photoshop 渲染图像)
我希望有一些不透明的渐变,以完美融合。小插图也更可取。我以前从未这样做过。
这是我的代码。除了 bootstrap 默认样式,我没有做任何样式。
<div id="myCarousel" class="carousel slide">
<div class="carousel-inner">
<div class="item active">
<img src="2.jpg" alt="img-responsive">
<div class="carousel-caption">
<h2>The worst of me suceeded by the best of You </h2>
</div>
</div>
</div>
和javascript
$(document).ready(function(){
$('.carousel').carousel({
interval:3000
})
});
只是控制时间间隔。 Bootstrap 3。 2.jpg是显示的图片。 感谢您的帮助,对不起我的英语。
最佳答案
这是一个 fiddle ,其中包含您可以执行的操作的快速示例。
为 webkit (Chrome) 制作渐变的 CSS 看起来像这样
background: -webkit-gradient(linear, left top, left bottom, color-stop(20%,rgba(0,0,0,0)), color-stop(100%,rgba(0,0,0,1)));
如果您在理解 CSS 时遇到问题,请查看 this page用于创建渐变。这是您自己制作的良好开端。 @TheLittlePig 在评论中提到的另一篇 stackoverflow 帖子也很有用。
关于javascript - 如何设置 bootstrap carousel-caption 的样式?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/22989216/