关于background

如视频.button中 width:40px;height:80px;背景图片的大小小于这个，background-color:green;为什么完全不出现？

.button{
   position:absolute;
   width:40px;
   height:80px;
   left:244px;
   top:50%;
   margin-top:-40px;
   background-color:green;
   background: url("C:/huaXiaXia/Sublime%20Text%203/教辅/实现轮播教辅/JavaScript实现轮播特效（代码）/img/arrow.png") no-repeat center center;
   
  }
  .pre{
   transform:rotate(180deg);
  }
  .next{
   left:auto;
   right:0;

一只javaer 2018-06-14

源自：项目：JavaScript轮播图 2-3 轮播图上按钮样式

收起

1回答

好帮手慕阿莹 2018-06-14 17:14:25

同学指的是什么不出现呢？建议同学可以截一下图，

并且，老师的代码中没有同时在.button写：

background-color:green;

background: url

而是把 background-color改为了background: url

祝学习愉快。

收起回答

提问者一只javaer #1

emm就是说button中 width:40px;height:80px，我设置了background-color:green;那么他就应该是是个绿色的长方形，后面我在用background: 设置了背景图片，原图大小是小于这个长方形的，那么出现的结果应该是背景图片+周围绿色的背景颜色，想知道我哪里理解的不对？

2018-06-14 17:43:16
好帮手慕阿莹回复提问者一只javaer #2

因为background属性覆盖了background-color属性，如果你想实现你说的效果，你可以把background-color:green;放到background ：url的后边

2018-06-14 18:27:50
提问者一只javaer 回复好帮手慕阿莹 #3

明白了，谢谢?

2018-06-14 18:47:15