Summary and sharing of background (properties, colors, pictures) settings in css

This article is about some common sense about css background. It introduces css background properties, css background color, and css background image in detail. Friends in need can refer to

1. css background properties

1.CSS background property and CSS3 background image settings Summary sharing

In css, there are several background attributes as follows.

background 在一个声明中设置所有的背景属性。 background-attachment 设置背景图像是否固定或者随着页面的其余部分滚动。 background-color 设置元素的背景颜色。 background-image 设置元素的背景图像。 background-position 设置背景图像的开始位置。 background-repeat 设置是否及如何重复背景图像。 background-clip 规定背景的绘制区域。 background-origin 规定背景图片的定位区域。 background-size 规定背景图片的尺寸。

2.Must master CSS knowledge-background property

Note: background-color cannot be inherited, and its default value is transparent. Transparent means "transparent". That is, if an element does not specify a background color, the background is transparent so that the background of its ancestor elements is visible.

3.css background fixed style background-attachment attribute basic introduction

The background-attachment attribute has only 2 attribute values. scroll means that the background image scrolls as the object scrolls, which is the default option; fixed means that the background image is fixed on the page, and only other content scrolls with the scroll bar.

2. css background color

1.Use CSS to cleverly create background color gradient animation examples

The text starts here. Sometimes, well, it should be said that in some specific occasions, we may need the following animation effect, gradient + animation:

2.Use css3 to implement the background Gradient method

Before I didn’t understand that CSS could also be used to make background gradients, I always used PS to apply background gradient pictures to the web pages I created. However, not long ago, I learned that CSS3 can also do background gradients, and it has become much easier to achieve background gradient effects. Here are some methods of doing background gradients in CSS3

3.CSS3 An example of using RGBa to adjust transparency in

In CSS3, an opacity attribute is added to allow developers to set the transparency of elements. Now opacity has been supported by mainstream modern browsers, but opacity will Setting the set element and its sub-elements to the same transparency at the same time is quite inflexible and often causes a lot of trouble in actual development. In fact, there is another color transparency solution in CSS3 - RGBa. Compared with opacity, RGBa can set transparency on a single element without affecting its sub-elements. However, RGBa's browser support is not as extensive as opacity, so it has attracted relatively little attention from developers.

3. css background image

1.CSS implements responsive full-screen background image

A very popular web page format currently is full-screen large images. This article will use the simplest way to achieve this effect. The CSS property background-size is used, no javascript is required.

2.Detailed explanation about CSS3 multiple backgrounds and background image cropping, positioning and size

Before CSS3 we could edit the background Add an image. CSS3 allows us to add multiple images to an element. Multiple backgrounds can add multiple image resources to the background attribute, separated by commas

and then use background-position to position them. The position you want

3.CSS full-screen background image setting django loading image path detailed description

This article introduces the css full-screen background image setting django loading image path The detailed explanation is very good, and I would like to give it as a reference for everyone.

4.Introducing two special effect codes that use CSS to achieve transparent background images and opaque text

Method 1 (frosted glass effect): background image + pseudo class + flite: blur(3px)

Method 2 (semi-transparent effect): background image + positioning + background:rgba(255,255,255,0.3)

CSS two methods to achieve transparent background image and opaque text effect

In projects, it is often used to put some text introduction on the background image. Here are two techniques to achieve transparent background images and opaque text effects. Record them for future learning.

Questions and answers related to the background attribute in css

1.css3 - css How to write css so that the background color does not fill the border?

2.css3 - How to make the height of css background image 100% and the width maintain proportion?

3.css3 - css background adaptive problem

4.css3 - How to make the webpage CSS background image Gaussian blurred and display it in full screen

【Related recommendations】

1.Free css online video tutorial

2.php.cn Dugu Jiujian (2) －css video tutorial

3.Learn CSS video tutorial css background at your fingertips

The above is the detailed content of Summary and sharing of background (properties, colors, pictures) settings in css. For more information, please follow other related articles on the PHP Chinese website!