CSS背景透明度。 透明的背景或文字与CSS

随着CSS3网页设计师出现在许多方面的工作变得更简单，更符合逻辑的：毕竟，你现在可以真正灵活定制任何物体，不经常诉诸的JavaScript。 比方说，你需要调整背景的透明度 - CSS立即提供了多种选择。

由一组属性的定义背景（背景图像，背景位置 ，背景大小，背景重复，背景附件，背景原点，背景剪辑，背景颜色），其中的每一个可以在属性下单独分配或组合背景。 让我们来看看他们每个人的详细介绍。

属性背景颜色

在CSS中， 背景颜色 使用十六进制代码，颜色名称或RGB-条目：可以用几种方式来设置。 在CSS3它成为可以使用的，而不是用RGBA RGB-录制选项。

十六进制颜色代码被记录在晶格后的属性：背景颜色：＃FFDAB9。 如果在这个条目中的文字是相同的对，代码通常是一个小切口：＃ccff00可以写成＃CF0：

体{背景色：＃CF0 ;}。

这个名字是，即使在最奇异的色彩。 例如，除了标准的红色和白色，你可以使用印地安（#FFDEAD）或Honeydew2（＃E0EEE0）：

体{背景色：紫色; }。

后一种选择是RGB或RGBA项允许您指定不仅颜色，但也CSS背景的透明度，但该方法只适用于较年长9的IE版本。 其他浏览器识别与透明度普通版。 根据W3C标准，优选使用仍然RGBA而不是更通常的RGB。

在RGBA背景的最后一个值，并设置从0（透明）到1（不透明）的不透明度。

有一些不寻常的价值。 背景颜色可以使用HSL和HSLA进行设置。 既加入到CSS3，并且因此不被IE版本9或更高的支持。 实施例中相同的RGB或RGBA，只以不同的格式：色相（遮阳 - 值在色轮上，以度为单位给出），饱和（饱和度 - 彩色强度为百分比，从0到100），亮度（亮度 - 亮度，同样地，测定参数饱和和）。

属性背景图片

透明背景的大多数跨浏览器版本 - 这是使用图像的。 在CSS3，可以设置更多的图像，这是通过一个逗号来完成。 例如：

{背景体图像： URL（bg1.png），URL（bg2.png）}。

甚至支持IE8这样。 几个图像在布局中使用的橡胶的背景。 重要的是，不要忘记使用任何图像，并设置在CSS背景颜色，用户可以简单地上传图片。

属性背景位置

如果您使用图像设置背景单元，CSS允许你在图像任何位置在屏幕上。 默认情况下，图像位于左上角。 属性将是口头指示（顶部，底部，左，右），数值（利息，像素和其它单位）。 在这种情况下，你必须指定两个值，水平和垂直：

体{背景位置：右中心 ;} -在该示例中，图案将被位于页面，到相同的图像距离的顶部和底部的右侧。

属性背景大小

有时候需要拉伸CSS背景或减少其大小。 要做到这一点，可以使用属性背景大小，并且可以在像素或百分比来设置背景的大小，和任何其它单位。

有了这个属性，也存在一些问题：对使用在早期版本的浏览器前缀的背景的正确显示。 当然，目前的版本完全支持此属性和需要特定属性消失。

属性背景附件

该属性指定滚动时背景图像的行为。 因此，它可以采取3个值（不包括继承，总让所有本文中讨论的属性）：

• 固定 -使得上的固定的背景图像;
• 滚动 -与元件的其它部分的背景滚动;
• 地方 -在背景的图像，如果滚动已滚动内容。 背景超越该帧的内容是固定的。

使用示例：

体{背景附件固定}。

目前，Firefox不支持的最后一个属性（本地）。

属性背景起源

此属性负责定位元件。 早期的浏览器需要使用前缀。 酒店本身有三个参数：

• 填充盒是考虑到框架的厚度，同时相对于该边缘图案定位;
• 从在前面的边界线可以是不同的边界框属性完全或部分地重叠图案;
• 内容框定位图像pryavyazyvaya其内容。

如果指定了多个值，那么浏览器可以以自己的方式作出反应：Firefox和Opera感知只有第一个选项。

属性背景重复

作为一项规则，如果指定了背景图像，则它必须被水平或垂直地重复。 对于这一点，使用的属性背景重复。 因此，块的背景，其中包含这样的属性的CSS可以有几个参数之一：

• 不重复 -图像出现在一个版本的页面上;
• 重复 -背景重复在x和y;
• 重复- X -只有水平;
• 重复-Y -只在垂直方向;
• 空间 -背景是重复的，但如果空间是不可能的图片之间填充显示为空;
• 圆 -对图像进行缩放，如果不填整个图片的整个区域。

的属性的例子：

体{背景重复：NO-重复重复} -类似背景重复：重复-γ。

在CSS3列出参数，用逗号隔开时可以指定用于多个图像的值。

属性背景素材

该属性定义的边界之下的背景的行为（例如，在虚线帧的情况下）：

• 填充框 -在所述块的内部显示的背景;
• 边界框 -拍摄的图像框架下;
• 内容箱 -在背景画面只会出现在内容中。

使用示例：

体{背景剪辑：内容-框;}。

CHROM和Safari需要-webkit-前缀。

不透明度属性和过滤器

不透明度属性允许您设置背景的透明度 - CSS属性将工作在所有浏览器。 该值的范围设定为0.0至1.0以下。 在这种情况下，您可以设置CSS背景的透明度 没有整数值，而不是0.3是足够写0.3：

.block {背景图像：网址（ img.png）; 不透明度：0.3;}。

设置背景的不透明度，CSS是合适的，即使是第九版下面IE，使用的过滤器属性：

.block {背景图像：网址（ img.png）; 滤波器：α（不透明度= 30）}。

在这种情况下，不透明度值设为0和100之间。注意，不透明度通过RGBA继承属性不同的透明度设置：使用不透明度明确不仅成为背景的情况下，而且在单元内部的所有元素。

始终监视CIS浏览器和所有其他国家使用统计。 所有DTP的最大问题 - 旧版本的IE，他们不允许你使用的充分程度CSS3。 在布局不要忘记使用检查您的浏览器是否支持CSS属性的特殊服务。 如果您不能安装旧版本的浏览器，找到将在网上查在多个浏览该网站工作的服务。