This is the 10th day of my participation in the August More text Challenge. For details, see: August More Text Challenge

Read not in the middle of the night five drum, work is work by fits and starts. After watching feel have harvest, point a like bai!!

preface

In the first three articles, the analysis of the text attributes in CSS, as the saying goes, a picture is worth a thousand words, a good picture in the web page, with beautiful text, can attract the eye.

Background-image – Sets the background image of the element

define

Apply a graphic (for example, PNG, SVG, JPG, GIF, WEBP) or gradient to the background of an element.

There are two different types of images that can be included in CSS: regular images and gradients.

Attribute values

url(‘URL’)

The image URL

background-image: url(./bk.jpg);
Copy the code

none

Default value, no image

The gradient

Linear-gradient ()

The default is to create an image with a linear gradient from top to bottom

background-image: linear-gradient(#55efc4,#a29bfe);
Copy the code

grammar
background-image:linear-gradient(Angle /to, color, where the color starts to gradient,......) ; background-image:linear-gradient(),linear-gradient(a)... ;Copy the code

From the top down, the default is 180deg or to the bottom. The browser defaults to 0% for the first color and 100% for the last color

For example, 1 deg
background-image: linear-gradient(45deg.#55efc4.#a29bfe);
Copy the code

Example 2: to grammar
background-image: linear-gradient(to left top,#55efc4.#a29bfe);
Copy the code

Example 3 multi-color and location
linear-gradient(#55efc4,#a29bfe 30%,#fd79a8 50% )
Copy the code

Receive multiple linear gradients

The wrong case

background-image: linear-gradient(45deg,#55efc4,#a29bfe,linear-gradient( #d63031,#e84393);

Copy the code

The second gradient does not appear because the first gradient is from 0 to 100% and occupies the entire element, so the second gradient does not appear.

For the correct example, use Transparent

Transparent *%; To make part of the space transparent to show other gradients.

background-image: linear-gradient(45deg.#55efc4.#a29bfe,transparent 50%),linear-gradient( #d63031.#e84393);

Copy the code

Radial gradient()

Radial gradient creates “image”. From the center to the periphery, the shape of the divergence is round or oval

grammar
Background-image: radial-gradient([shape size at(location)], start color,...... , terminate the color);Copy the code

The shape of

Ellipse (default): Radial gradient of the ellipse.background-image: radial-gradient( #48dbfb,#ee5253);

Circle: Radial gradient of the circlebackground-image: radial-gradient( circle,#48dbfb,#ee5253);

size

Apape-corner (default) : specifies the radius length of the radial gradient from the center of the circle to the Angle furthest from the center

Closest side: specifies the radius length of the radial gradient from the center of the circle to the nearest edgebackground-image: radial-gradient(closest-side ,#48dbfb,#ee5253);

Closest corner: specifies the radius length of the radial gradient from the center of the circle to the nearest corner

background-image: radial-gradient(closest-corner at 20%,#48dbfb,#ee5253);

Apape-side: Specifies the radial gradient of the radius from the center of a circle to the farthest edge from the centerbackground-image: radial-gradient(farthest-side at 20%,#48dbfb,#ee5253); At (location)

At Center (default) : The ordinate value of the center of a radial gradient circle.

background-image: radial-gradient(at center,#48dbfb,#ee5253);

At top: at the top is the ordinate value of the center of the radial gradient circle. background-image: radial-gradient(at top,#48dbfb,#ee5253);

At bottom: At bottom is the ordinate value of the center of a radial gradient circle. background-image: radial-gradient(at top,#48dbfb,#ee5253);

At value: The value is the abscissa value of the center of a radial gradient circle.

background-image: radial-gradient(at 1590px,#48dbfb,#ee5253);

Conic-gradient Conic gradient

Cone gradient is similar to radial gradient. Both are circular and use the center of the element as the source point for color markers. However, where the color codes for radial gradients appear from the center of the circle, cone gradients place them around the circle.

Make a gradient cone at [point] that starts at [one color] at an Angle and ends at [another color] at [Angle]

It looks something like this, from

grammar
conic-gradient( [ from <angle> ]? [ at <position> ]? , <angular-color-stop-list> )Copy the code
Example 1 has only gradients
background-image: conic-gradient(#2ecc71, #e52e71);
Copy the code

Example 2 at syntax specifies the center point position
background-image: conic-gradient(at 30% 40%, #2ecc71, #e52e71);
Copy the code

Example 3 from syntax, specify the initial position of the cone
    background-image: conic-gradient(from 45deg, #2ecc71, #e52e71);
Copy the code

Example 4 From at

background-image: conic-gradient(from 45deg at 30% center, #2ecc71, #e52e71);

Example 5: Color + percentage

background-image: conic-gradient(#2ecc71 70%, #3498db, #e52e71);

Example 6: Color + Angle /turn

Background-image: conic-gradient(#2ecc71 45deg, #e52e71 0.5turn); background-image: conic-gradient(#2ecc71 45deg, #e52e71 0.5turn);

repeating-linear-gradient()

Create a repetitive linear gradient “image”. This property is the same as the liner-Gradlient parameter, except that the background-image will be repeated only if the first and last color positions are not 0% or 100% : repeating-linear-gradient( #48dbfb,#ee5253); This way you can’t create gradients

background-image: repeating-linear-gradient( #48dbfb,#ee5253 10%);

repeating-radial-gradient()

This property is the same as the radial gradlient parameter. The difference is that only when the final two colors are not 0% or 100%, the background-image will be generated. repeating-radial-gradient( #48dbfb,#ee5253); This way you can’t create gradients

background-image: repeating-radial-gradient( #48dbfb,#ee5253 );