首页 > 代码库 > bootstrap轮播图 两侧半透明阴影

bootstrap轮播图 两侧半透明阴影

2024-09-21 11:26:09   218人阅读

用bootstrap轮播图：Carousel插件，图片两侧影音实在碍眼，想去掉，首先发现有css里由opacity: 0.5这个东西来控制，全部改成opacity: 0.0，发现指示箭头也看不见了。

然后各种搜索，发现原来是应该这么改：

.carousel-control.left {
  /*background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.0001) 100%);*/
  background-image:none;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#80000000‘, endColorstr=‘#00000000‘, GradientType=1);
}
.carousel-control.right {
  left: auto;
  right: 0;
  /*background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
  background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);
  background-image: linear-gradient(to right, rgba(0, 0, 0, 0.0001) 0%, rgba(0, 0, 0, 0.5) 100%);*/
  background-image:none;
  background-repeat: repeat-x;
  filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=‘#00000000‘, endColorstr=‘#80000000‘, GradientType=1);
}

 

绿色是原来的css，被注释掉了，加一条

  background-image:none;

 

再看看，问题是不是已经完美解决了

bootstrap轮播图 两侧半透明阴影


联系
我们