bootstrap轮播图 两侧半透明阴影

用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;

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

时间: 2025-01-03 18:55:22

bootstrap轮播图 两侧半透明阴影的相关文章

Angular与bootstrap轮播图的结合使用

在做项目中碰到一处这样的bootstrap的轮播图的使用,数据要用angular动态绑定上去.公司logo图片,职位,公司名称 记录下做完后踩的坑. 1. 首先是使用bootstrap的轮播图示例代码进行改造 <div id="myCarousel" class="carousel slide" interval="false"//此次不需要自动轮播,添加此声明 data-pause="pause" //鼠标悬停后移出后

第124天:移动web端-Bootstrap轮播图插件使用

Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Carousel 一.基本的轮播图实现 HTML代码 1 <!-- 2 以下容器就是整个轮播图组件的整体, 3 注意该盒子必须加上 class="carousel slide" data-ride="carousel" 表示当前是一个轮播图 4 bootstrap.js

新手——bootstrap轮播图

使用bootstrap插件来写轮播图 1.   首先要写一个<div>容器:<div id="myCarousel" class="carousel" data-slide="carouse"></div> data-slide="carouse"可以让图片自己轮播,如果要把轮播图片居中,可以在容器外加上<div class="container"></

bootstrap轮播图carousel插件

一.基本介绍见:https://www.runoob.com/bootstrap/bootstrap-carousel-plugin.html 二.例子:在PC端使用轮播图(高度固定,图片居中,容器铺满,使用背景图) <div id="carousel-example-generic" class="carousel slide" data-ride="carousel"> <!-- 指示器 --> <ol clas

Bootstrap 轮播图(Carousel)插件

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>demo</title> <link rel="icon" type="image/x-icon" href="../img/favicon.ico"/> <script type

bootstrap轮播图

<!doctype html><html><head> <meta charset="utf-8"> <title>使用carousel</title> <!-- Bootstrap 核心 CSS 文件 --> <link rel="stylesheet" href="/stylesheets/bootstrap.min.css"> <!-- j

bootstrap 轮播图使用

1.html <div id="myCarousel" class="carousel slide"> <!--设置轮播器区域样式,设置轮播器滚动样式--> <ol class="carousel-indicators"> <!--设置轮播器列表区域样式,就是小圆点区域样式--> <li data-target="#myCarousel" data-slide-to=&qu

bootstrap 2版本轮播图

使用bootstrap 2的轮播图遇到了一些小问题,在这里记录总结一下. 1. 问题:Uncaught TypeError: e is not a function. 原因:jquery.js没有放在bootstrap.js之前,按照要求以及JS的加载顺序来说,jq一定要放在bootstrap.js之前,查看代码果然是这个原因 2. 问题:点击圆点和左右切换按钮,没有效果,且不报错,但是轮播可以自动播放 原因:对bootstrap轮播图的不理解. ①控制图片切换的圆点属性"data-target

第二百五十一节,Bootstrap项目实战--响应式轮播图

Bootstrap项目实战--响应式轮播图 学习要点: 1.响应式轮播图 本节课我们要在导航条的下方做一张轮播图,自动播放最新的重要动态. 一.响应式轮播图 响应式轮播图