css 一个div既设置背景图又设置背景颜色

快来打我* 2021-09-17 04:08 668阅读 0赞

###  1.  需求 : 设置一个背景上面为 背景图 下面 为颜色 ###

background: url('../images/invite_friends.png') 0 0 no-repeat #c70001;
    
    background-size: 100% 970px;

> background 简写属性在一个声明中设置所有的背景属性。
> 
> 可以设置如下属性：
> 
> <table> 
>  <tbody> 
>   <tr> 
>    <td>规定要使用的背景颜色。</td> 
>    <td>1</td> 
>   </tr> 
>   <tr> 
>    <td><em><a href="http://www.w3school.com.cn/cssref/pr_background-position.asp" rel="nofollow">background-position</a></em></td> 
>    <td>规定背景图像的位置。</td> 
>   </tr> 
>   <tr> 
>    <td><em><a href="http://www.w3school.com.cn/cssref/pr_background-size.asp" rel="nofollow">background-size</a></em></td> 
>    <td>规定背景图片的尺寸。</td> 
>   </tr> 
>   <tr> 
>    <td><em><a href="http://www.w3school.com.cn/cssref/pr_background-repeat.asp" rel="nofollow">background-repeat</a></em></td> 
>    <td>规定如何重复背景图像。</td> 
>   </tr> 
>   <tr> 
>    <td><em><a href="http://www.w3school.com.cn/cssref/pr_background-origin.asp" rel="nofollow">background-origin</a></em></td> 
>    <td>规定背景图片的定位区域。</td> 
>   </tr> 
>   <tr> 
>    <td><em><a href="http://www.w3school.com.cn/cssref/pr_background-clip.asp" rel="nofollow">background-clip</a></em></td> 
>    <td>规定背景的绘制区域。</td> 
>   </tr> 
>   <tr> 
>    <td><em><a href="http://www.w3school.com.cn/cssref/pr_background-attachment.asp" rel="nofollow">background-attachment</a></em></td> 
>    <td>规定背景图像是否固定或者随着页面的其余部分滚动。</td> 
>   </tr> 
>   <tr> 
>    <td><em><a href="http://www.w3school.com.cn/cssref/pr_background-image.asp" rel="nofollow">background-image</a></em></td> 
>    <td>规定要使用的背景图像。</td> 
>   </tr> 
>  </tbody> 
> </table>
> 
> 如果不设置其中的某个值，也不会出问题，比如 background:\#ff0000 url('smiley.gif'); 也是允许的。