码迷，mamicode.com
首页 > 其他好文 > 详细

说说background那些坑爹的事儿~

时间：2017-08-31 16:20:28      阅读：131      评论：0      收藏：0      [点我收藏+]

标签：mono   背景图   ack   bottom   round   背景图片   button   back   bar   

啥都不说先上个代码~

.content {
  1.  background: url(../images/bg.png) no-repeat bottom center,-webkit-linear-gradient(#639fff,#4b7aff),linear-gradient(#639fff,#4b7aff);
  2. border-radius: .2rem;
  3. background-size: 8rem auto;
}
看第一个红色部分的属性，我原本想要的是一个渐变的背景色加一个背景图片，结果遍历设备的时候发现安卓4.0的破机子不支持~！！
结果我又默默回去改了，改成下下面那样：
.content {
  1.  background: -webkit-linear-gradient(#639fff,#4b7aff),linear-gradient(#639fff,#4b7aff);
  2.  border-radius: .2rem;
  3.  background-size: 8rem auto;
  4.  background-image: url(../images/bg.png);
}
后来默默的被告知原来渐变也是类似于背景图，所以被覆盖了，两个属性只留下了一个
最后附上最后的写法：
.content {
  1. background-color: #639fff;
  2. border-radius: .2rem;
  3. background-size: 8rem auto;
  4. background-image: url(../images/bg.png);
  5. background-repeat: no-repeat;
  6. background-position: bottom center;
}
把渐变的颜色也给改成了单色。。不然你要是想保留渐变色的话也可以把图片直接写成<img src="../images/bg.png">

说说background那些坑爹的事儿~

标签：mono   背景图   ack   bottom   round   背景图片   button   back   bar   

原文地址：http://www.cnblogs.com/wmj1155/p/7458177.html
踩
(0)
赞
(0)
   
举报
评论 一句话评论（0）
登录后才能评论！
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行
mamicode.com排行更多图片
更多
友情链接
兰亭集智   国之画   百度统计   站长统计   阿里云   chrome插件   新版天听网
关于我们 - 联系我们 - 留言反馈
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码！