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:;
/*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轮播图 两侧半透明阴影的更多相关文章
- Bootstrap 轮播图的使用和理解
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
- bootstrap轮播图--兼容IE7
<!DOCTYPE html> <html> <head> <title>Bootstrap轮播</title> <meta char ...
- 动态请求数据并放入bootstrap轮播图
下面是前端代码: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> < ...
- 第124天:移动web端-Bootstrap轮播图插件使用
Bootstrap JS插件使用 > 对于Bootstrap的JS插件,我们只需要将文档实例中的代码粘到我们自己的代码中> 然后作出相应的样式调整 Bootstrap中轮播图插件叫作Car ...
- bootstrap轮播图组件
一.轮播图组件模板(官方文档) <div id="carousel-example-generic" class="carousel slide" dat ...
- bootstrap轮播图
<!doctype html><html><head> <meta charset="utf-8"> <title>使用 ...
- Bootstrap 轮播图(Carousel)插件
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- bootstrap轮播图不能显示左右箭头
引入font文件夹即可 原文 :http://www.imooc.com/qadetail/64277
- Bootstrap 我的学习记录4 轮播图的使用和理解
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="utf-8& ...
随机推荐
- H5 俄罗斯方块Demo
链接:http://pan.baidu.com/s/1hrDM0T2
- Codeforces Round #498 (Div. 3)--E. Military Problem
题意问,这个点的然后求子树的第i个节点. 这道题是个非常明显的DFS序: 我们只需要记录DFS的入DFS的时间,以及出DFS的时间,也就是DFS序, 然后判断第i个子树是否在这个节点的时间段之间. 最 ...
- xcode8 使用Instruments检测定位并解决iOS内存泄露
https://www.jianshu.com/p/9bc7e65fc247 2017.07.27 17:24* 字数 628 阅读 1319评论 6喜欢 21 简介: 虽然苹果出了ARC(自动内存管 ...
- PHP之提升代码质量36计
转载:https://www.binarytides.com/35-techniques-to-enhance-your-php-code/ 1.不要使用相对路径 常常会看到: require_onc ...
- SELECT list is not in GROUP BY clause and contains nonaggregated column
报错如下: Expression # of SELECT list is not in GROUP BY clause and contains nonaggregated column ‘sss.m ...
- Datatable get请求传参应用
以关注页面为例: html: <div class="row"> <div class="col-md-12 col-sm-12 col-xs-12&q ...
- codeforces483B
Friends and Presents CodeForces - 483B You have two friends. You want to present each of them severa ...
- eclipse报错 : One or more constraints have not been satisfied.
当eclipse进行报错时,但是不影响运行时,这种错误一般是编译时的问题 进行修改3个地方,即可完成 一 : 进行修改这三个地方的配置文件,都改成你统一的jdk版本,和你用的Dynamic Web ...
- Windows 7 下安装 docker 应用容器引擎
文档地址 ====================================== 安装篇 下载工具 https://get.daocloud.io/toolbox/ 下载完成点击安装 (可参考: ...
- pytest 12 函数传参和fixture传参数request
前沿: 有的case,需要依赖于某些特定的case才可以执行,比如,登陆获取到的cookie,每次都需要带着他,为了确保是同一个用户,必须带着和登陆获取到的同一个cookies. 大部分的用例都会先登 ...