多个CSS背景，图像上的颜色，忽略 [英] Multiple CSS backgrounds, colour over image, ignored

问题描述

这个多背景CSS行出了什么问题。 Firefox 4忽略它（就像语法错误时一样）。

  background：rgba（255,0,0,0.2 ），url（static / menubg.jpg）; 
   
 
解决方案
  / code> in CSS3背景是 [< bg-layer> ，] *< final-bg-layer> ，这意味着零或多个< bg-layer> s  c $ c>< final-bg-layer> ，用逗号分隔。请参见​​ http://www.w3.org/TR/css3-background/#the-background 
 
 
 
 A < final-bg-layer> 定义为：
 < final-bg-layer> =< bg-image> || < bg-position> [/< bg-size> ]？ || 
< repeat-style> || < attach> || < box> {1,2} || 
<'background-color'> 
 
而< bg-layer> 是：
 < bg-layer> =< bg-image> || < bg-position> [/< bg-size> ]？ || 
< repeat-style> || < attach> || < box> {1,2} 
  
（定义http://www.w3.org/TR/css3-background/#ltbg-layergt ）。
 
 
 
或者简单来说，只有最低的背景层可以包含背景颜色。所以是的，你的CSS其实是一个语法错误。
 
 
 
哦，看起来像https://developer.mozilla.org/en/css/multiple_backgrounds 中有一些错误。我已经修复了他们。
 
What's wrong with this multiple background CSS line. Firefox 4 ignores it (as it does when there's a syntax error).
background: rgba(255,0,0,0.2), url("static/menubg.jpg");

解决方案
The syntax for background in CSS3 Backgrounds is [ <bg-layer> , ]* <final-bg-layer>, which means zero or more <bg-layer>s and then a single <final-bg-layer>, separated from each other by commas.  See http://www.w3.org/TR/css3-background/#the-background

A <final-bg-layer> is defined as:
<final-bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? || 
                   <repeat-style> || <attachment> || <box>{1,2} ||
                   <'background-color'>
whereas a <bg-layer> is:
 <bg-layer> = <bg-image> || <bg-position> [ / <bg-size> ]? ||
              <repeat-style> || <attachment> || <box>{1,2}
(both definitions at http://www.w3.org/TR/css3-background/#ltbg-layergt ).

Or in simple terms, only the lowest background layer can include a background color.  So yes, your CSS is in fact a syntax error.

Oh, and looks like https://developer.mozilla.org/en/css/multiple_backgrounds had some errors in it.  I've fixed them.

                        
这篇关于多个CSS背景，图像上的颜色，忽略的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！