css背景图片高斯模糊

Well, you have now seen the syntax of CSS and are now comfortable with writing CSS rules using class and id selectors. Moving on, we now dive into backgrounds in CSS and it's time to ditch the old black and white theme and have beautiful, bright designs.

好了，您现在已经了解了CSS的语法，现在可以轻松地使用class和id选择器编写CSS规则。继续，我们现在进入CSS背景，现在该抛弃旧的黑白主题，并拥有漂亮，明亮的设计。

The background property is one of the most useful ones and really fun to play around with. It is used to manipulate page backgrounds as we shall soon see.

background属性是最有用的属性之一，并且非常有趣。我们将很快看到，它用于操纵页面背景。

背景色- `background-color` (Background Color - `background-color`)

color in CSS world, can be specified in the following three ways:

CSS世界中的color ，可以通过以下三种方式指定：

using a valid color name, like red

使用有效的颜色名称，例如red
using an RGB value, like rgb(255, 255, 255)

使用RGB值，例如rgb(255, 255, 255)
or, by using the Hexa code for the color, like #F9F9F9 (There are many websites to check hexa codes for colors, like ColorHexa)

或者，通过使用十六进制代码表示颜色，例如#F9F9F9 (有很多网站检查十六进制代码以显示颜色，例如ColorHexa )

Coming back to background-color, this property sets an element's background color. The default value, transparent allows any underlying content to show through. A value of inherit applies the value of the property from a containing parent element.

回到background-color ，此属性设置元素的背景色。默认值transparent允许任何基础内容显示出来。 inherit值适用于包含父元素的属性值。

background-color: color | transparent | inherit

For example,

例如，

h1 { background-color: red; }p { background-color: orange; }

Live Example →

现场示例→

The above example, will set background color as red for all the h1 headings and background color as orange for all the paragraphs.

上面的示例将所有h1标题的背景色设置为red ，并将所有段落的背景色设置为orange 。

This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,

它与CSS1 ， CSS2和CSS3以及以下Web浏览器兼容，

IE 4+

IE 4+
Firefox 1+

Firefox 1+
Opera 4+

歌剧4+
Safari 1+

Safari 1+

背景图片- `background-image` (Background Image - `background-image`)

As the name suggests, background-image associates an image with an element. The background image requires a URL to the source image specified with the url() syntax. The default value is none.

顾名思义， background-image将图像与元素相关联。背景图像需要使用url()语法指定的源图像的url() 。默认值为none 。

background-image: url(image-file) | none | inherit

Consider the below example, this will set a background image for the complete webpage.

考虑以下示例，这将为整个网页设置背景图像。

body { background-image: url(tile.png)
}

To set background image, for any particular element/tag, use class or id to do so,

要设置背景图片，对于任何特定的元素/标签，请使用class或id进行设置，

#hello { background-image: url(http://www.example.com/images/hello.gif);
}

Live Example →

现场示例→

The value of url can be a complete web URL or a relative URL. For example, you can simply specify the name of the picture, if it is present in the same directory.

url的值可以是完整的Web URL或相对URL。例如，您可以简单地指定图片的名称(如果图片位于同一目录中)。

This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,

它与CSS1 ， CSS2和CSS3以及以下Web浏览器兼容，

IE 4+

IE 4+
Firefox 1+

Firefox 1+
Opera 4+

歌剧4+
Safari 1+

Safari 1+

NOTE: One important point to remember while setting backgrounds is, always choose a background that complements the text on it, so that the text is clearly visible.

注意：设置背景时要记住的重要一点是，请始终选择与背景文字互补的背景，以使文字清晰可见。

重复背景- `background-repeat` (Repeat Background - `background-repeat`)

Sometimes, it may so happen that the background image that you choose for your webpage may be smaller than the canvas space that is used by other elements on the page. In such a situation, you may want to repeat the image. The values for this property can be following:

有时，您为网页选择的背景图像可能小于页面上其他元素使用的画布空间。在这种情况下，您可能需要重复图像。此属性的值可以如下：

repeat - repeats image both vertically and horizontally. This is the default value for background-repeat property.

repeat -垂直和水平重复图像。这是background-repeat属性的默认值。
repeat-x - repeats only horizontally

repeat-x仅水平重复
repeat-y - repeats vertically

repeat-y垂直重复
no-repeat - doesn't repeat the background image.

no-repeat -不重复背景图片。

Example:

例：

body{ background-image: url(studytonight.png);background-repeat: no-repeat;
}

Live Example →

现场示例→

The above code will make the image studytonight.png as the webpage background, but if the size of the image is smaller, it will not completely fill the webpage, and as the background-repeat property is set to no-repeat, hence it won't be repeated, leaving some area with no background.

上面的代码会将图像studytonight.png用作网页背景，但是如果图像的尺寸较小，则不会完全填满网页，并且由于background-repeat属性设置为no-repeat ，因此它赢得了不再重复，留下一些没有背景的区域。

This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,

它与CSS1 ， CSS2和CSS3以及以下Web浏览器兼容，

IE 4+

IE 4+
Firefox 1+

Firefox 1+
Opera 4+

歌剧4+
Safari 1+

Safari 1+

背景位置- `background-position` (Background Position - `background-position`)

By default a background image is positioned at the top left corner of the webpage, but we can change that.

默认情况下，背景图像被放置在网页的左上角 ，但我们可以改变这种状况。

This property determines how a background image is positioned. The position of the background image from the top left corner can be specified in terms of absolute distance(in pixels), or it can also be specified as a percentage value.

此属性确定如何定位背景图像。左上角的背景图像的位置可以以绝对距离(以像素为单位)指定，也可以指定为百分比值。

The named values can also be used while determining the position. The horizontal axis names are center, left and right. The vertical axis, as you might have guessed, top, center and bottom. Consider the following examples:

确定位置时也可以使用命名值。水平轴名称为中心，左侧和右侧。您可能已经猜到了垂直轴top ， center和bottom 。请考虑以下示例：

body { background-image: url(hello.png); background-position: 100px 150px;
}
body { background-image: url(hello.png); background-position: 10% 55%;
}
body { background-image: url(hello.png); background-position: top center;
}

Try this by adding background-position: top right; to #study style in the last live example.

通过添加 background-position: top right;尝试 background-position: top right; 在最后一个实时示例中 #study为 #study样式。

When we specify background-position in pixels or percentage, we specify 2 values, first value specifes distance from the left side, and the second value specifies the distance from the top.

当我们以像素或百分比为单位指定background-position时，我们指定2个值，第一个值指定距左侧的距离，第二个值指定距顶部的距离。

This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,

它与CSS1 ， CSS2和CSS3以及以下Web浏览器兼容，

IE 4+

IE 4+
Firefox 1+

Firefox 1+
Opera 4+

歌剧4+
Safari 1+

Safari 1+

背景行为- `background-attachment` (Background Behaviour - `background-attachment`)

This property sets, whether the background image will scroll or not. The default value is scroll, which sets the background to scroll with the associated content, typically text. The alternate value, fixed, makes the background static while associated content scrolls over the background.

此属性设置背景图像是否滚动。默认值为scroll ，它将背景设置为与相关内容(通常为文本)一起滚动。备用值fixed可以使背景静止，而相关内容在背景上滚动。

A value of inherit applies the value of the property from a containing parent element.

inherit值适用于包含父元素的属性值。

background-attachment: scroll | fixed | inherit

Consider the following example,

考虑以下示例，

body{ background-image: url (hello.png); background-repeat: no-repeat;background-position: right top;background-attachment: fixed; }

This is compatible with CSS1, CSS2 and CSS3 along with following Web Browsers,

它与CSS1 ， CSS2和CSS3以及以下Web浏览器兼容，

IE 4+

IE 4+
Firefox 1+

Firefox 1+
Opera 4+

歌剧4+
Safari 1+

Safari 1+

Note: This property is often used to create a watermark effect similar to the proprietary attribute of the tag, bgproperties, introduced by Microsoft.注意：此属性通常用于创建水印效果，类似于Microsoft引入的标记的专有属性bgproperties。

背景属性一起 (Background Properties together)

If we want, we can combine all the above background properties in a single property.

如果需要，可以将所有上述背景属性组合为一个属性。

The order of the properties should not matter and any property that you don't define use their own default values. Consider the following examples:

属性的顺序无关紧要，并且您未定义的任何属性都使用其自己的默认值。请考虑以下示例：

body { background: white url(picture.gif) repeat-y center; }

翻译自: https://www.studytonight.com/cascading-style-sheet/css-backgrounds

css背景图片高斯模糊