用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:;
/*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轮播图 两侧半透明阴影的更多相关文章

  1. Bootstrap 轮播图的使用和理解

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

  2. bootstrap轮播图--兼容IE7

    <!DOCTYPE html> <html> <head> <title>Bootstrap轮播</title> <meta char ...

  3. 动态请求数据并放入bootstrap轮播图

    下面是前端代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...

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

    Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...

  5. bootstrap轮播图组件

    一.轮播图组件模板(官方文档) <div id="carousel-example-generic" class="carousel slide" dat ...

  6. bootstrap轮播图

    <!doctype html><html><head> <meta charset="utf-8"> <title>使用 ...

  7. Bootstrap 轮播图(Carousel)插件

    <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...

  8. bootstrap轮播图不能显示左右箭头

    引入font文件夹即可 原文 :http://www.imooc.com/qadetail/64277

  9. Bootstrap 我的学习记录4 轮播图的使用和理解

    <!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...

随机推荐

  1. linux 下一些命令

    1. 后台执行命令 nohup  http://blog.csdn.net/liuyanfeier/article/details/62422742 2. 查看日志文件 格式:tailf logfil ...

  2. HTML文字与列表

    文字内容 添加文字 <body> 我是Mingle </body> HTML文字的需要添加在<body> </body>里面. 标题字 标题字就是以几种 ...

  3. SpringBoot返回date日期格式化,解决返回为TIMESTAMP时间戳格式或8小时时间差

    问题描述 在Spring Boot项目中,使用@RestController注解,返回的java对象中若含有date类型的属性,则默认输出为TIMESTAMP时间戳格式 ,如下所示: 解决方案    ...

  4. 其它综合-VMware虚拟机安装Ubuntu 19.04 版本

    Ubuntu 19.04 版本安装过程 1. 环境: 使用的虚拟机软件是VMware,版本为 12 .(网上一搜一大推,在此不再演示.) 使用的 ISO镜像为Ubuntu 19.04.(自己也可以在网 ...

  5. idea在Terminal中使用maven指令

    如果无法直接使用mvn指令,那么这里需要配置你idea中的maven的环境变量, 先说maven在idea中的位置,在你idea安装目录下的\plugins\maven 接下来配置环境变量:在你的用户 ...

  6. POJ3565 Ants (不相交线)

    那请告诉我 A - D  B - C  和  A - C  B - D 那个的和小 显然是A - C  B - D  (可以根据四边形 对角线大于对边之和) 然后 求的答案是不是就一定是不相交的 就是 ...

  7. vscode设置python3.7调试环境(已更新)

    汇总系列:https://www.cnblogs.com/dunitian/p/4822808.html#ai CentOS安装Python3.7:https://www.cnblogs.com/do ...

  8. Mycat的分库分表

    其他方法: 雪花算法或者redis来实现id不重复的问题. 数据库分库分表: 垂直拆分的优缺点: 水平拆分: 分片枚举:即根据枚举(定义的常量)进行分类存储.

  9. linux使用mail发送外部smtp邮件

    linux使用mail发送外部smtp邮件 第一章 说明 参考资料: http://coolnull.com/2614.html linux自带的mail可以实现外部smtp发邮件.不需要本地配置po ...

  10. Python实现聚类算法AP

    1.算法简介 AP(Affinity Propagation)通常被翻译为近邻传播算法或者亲和力传播算法,是在2007年的Science杂志上提出的一种新的聚类算法.AP算法的基本思想是将全部数据点都 ...