Hello everyone , I am Pinellia ternata , A sand carving programmer who just started writing . If you like my article , Can pay attention to give the thumbs-up Add me WeChat :frontendpicker, Learn to communicate together , Become a better Engineer ~ Official account : Pinellia ternata , Learn more about the front end ! Am I Explore the new world !

Link to the original text ==>http://sylblog.xin/archives/37

Gradient Pinyin jiàn biàn, It means a regular change . Gradient can give people a strong sense of rhythm and aesthetic interest . This form can be seen everywhere in daily life , Is a common visual image . Because of the principle of perspective in painting , The object will change from large to small , Many natural phenomena are full of gradual formal characteristics . The use of gradient technology can enrich the picture , Give people a stronger visual impact .

background-image- Set the background image of the element

Definition

Put the figure ( for example PNG、SVG、JPG、GIF、WEBP) Or gradient applied to the background of the element .

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

Property value

url('URL')

Graphic URL

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

none

The default value is , No image

The gradient

linear-gradient() Linear gradient

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

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

grammar
background-image:linear-gradient( angle /to, Color , Color    Where to start the gradient , ......);

background-image:linear-gradient(),linear-gradient()...;

According to the grammar , A reasonable guess , From the top down , The default is 180deg perhaps to bottom,

By default, the browser will set the position of the first color to 0%, Set the position of the last color to 100%

give an example 1 deg
background-image: linear-gradient(45deg,#55efc4,#a29bfe);

give an example 2 to grammar
background-image: linear-gradient(to left top,#55efc4,#a29bfe);

give an example 3 Multi color and location
linear-gradient(#55efc4,#a29bfe 30%,#fd79a8 50% )

Receive multiple linear-gradient

The wrong case

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

The second gradient does not appear , This is because the first gradient is from 0-100% Of , Fill up the whole element , So the second one didn't appear .

The correct sample , Use transparent

Use transparent *%; To make part of the space transparent , This displays other gradients .

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

radial-gradient() Radial Gradient

Radial gradient creation " Images ". From the center to all around , The divergent shape is round or oval

grammar
background-image: radial-gradient([ shape   size  at( Location )], Start color ,......, Stop color );

shape

ellipse ( Default ): Oval radial gradient .

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

circle : Circular radial gradient

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

size

farthest-corner ( Default ) : Specifies that the radius length of the radial gradient is from the center to the angle farthest from the center

closest-side : Specifies that the radius length of the radial gradient is from the center to the edge closest to the center

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

closest-corner : Specifies that the radius length of the radial gradient is from the center of the circle to the angle closest to the center of the circle

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

farthest-side : Specifies that the radius length of the radial gradient is from the center to the edge farthest from the center

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



at( Location )

at center( Default ): The middle is the ordinate value of the radial gradient center .

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

at top: The top is the ordinate value of the radial gradient center .

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

at bottom: The bottom is the ordinate value of the radial gradient center .

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

at value : The value is located at the center of the radial gradient Abscissa value .

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

conic-gradient Taper gradient

A conical gradient is similar to a radial gradient . Both are circular and use the center of the element as the source of the color code . However , Where the color code of radial gradient appears from the center of the circle , Conical gradients place them around the circle .

To make a be located [ Some point ] Of Conical gradient , The Gradient to From a certain angle [ A color ] Start , and With [ Some angle ] Of [ Another color ] end

It's probably the following effect , from

grammar
conic-gradient(
[ from <angle> ]? [ at <position> ]?,
<angular-color-stop-list>
)
give an example 1 Only gradients
background-image: conic-gradient(#2ecc71, #e52e71);

give an example 2 at grammar Specify the location of the center point
background-image: conic-gradient(at 30% 40%, #2ecc71, #e52e71);

give an example 3 from grammar , Specify the initial position of the cone
    background-image: conic-gradient(from 45deg, #2ecc71, #e52e71);

give an example 4 from at Use at the same time

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

give an example 5 Behind the color + percentage

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

give an example 6 Behind the color + angle /turn

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

repeating-linear-gradient()

Create a repeating linear gradient " Images ".

This property is associated with liner-gradlient The parameter usage is consistent ,

The difference is

Only when the first and last color positions are not in 0% or 100% when , Will produce repeated gradients

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

You can't produce gradients in this way

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

repeating-radial-gradient()

Create duplicate radial gradients " Images "

This property is associated with radial-gradlient The parameter usage is consistent ,

The difference is

Only the original and final color positions are not present 0% or 100% when , Will produce repeated gradients

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

You can't produce gradients in this way

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

About background-image The gradient gradient() Those things ! More articles about

  1. CSS3 Medium gradient gradient Detailed explanation

    I read a book these days HTML5 The book of , It uses a lot of gradient effects for the background of the page , So write something here about gradients Gradient Things that are . CSS3 Medium Gradient There are two kinds of , They're linear gradients (linear-gradien ...

  2. CSS3 The gradual change of Gradient

    Gradients are CSS3 More interesting properties in , Learned to gradient , Then you can make a very dazzling thing .CSS3 Medium gradient ——Gradient It is divided into linear-gradient( Linear gradient ) and radial-gradient( Radial Gradient ). ...

  3. CSS3 The gradient of -gradient

    CSS3 Gradient It is divided into linear-gradient( Linear gradient ) and radial-gradient( Radial Gradient ). CSS3 Linear gradient of One . Linear gradients in Mozilla Next application grammar : -moz-li ...

  4. background And gradient summary

    One ,background-position:( Picture positioning ) Three ways of writing : 1): Press % Than , The top left corner is the smallest (0%,0%), The lower right corner is the largest (100%,%100): 2):(x,y) The top left corner is the smallest (0,0), The lower right corner is the largest (ma ...

  5. css3 The gradient gradient

    Reference resources : http://www.w3cplus.com/content/css3-gradient

  6. Use CSS3 Create a text color gradient (CSS3 Text Gradient)

    Think about it , How to achieve the effect similar to the following text gradient in the web page ? In the traditional realization , It's a transparent gradient image over the text . The specific implementation method can be referred to  http://www.qianduan.net/css-gradient-te ...

  7. Android shape The gradient ! Stroke ! Round corners ! Example details

    have a look shape Usage of , It really helps . Here I am lazy to turn a more detailed post , Make progress with you ~! Android It is often used in shape To define some display properties of the control , I saw some today shape Use , Yes shape With a general ...

  8. CSS3 The gradient (Gradients)- Linear gradient

    CSS3 The gradient (Gradients) Allows you to show a smooth transition between two or more specified colors , Including transparency . before , You have to use images to achieve these effects . however , adopt Css3 The gradient (Gradients), You can reduce the number of downloads and ...

  9. CSS3 Linear gradient of (linear-gradient)

    CSS3 The gradient (gradient) It can be divided into linear gradients (linear-gradient) And radial gradients (radial-gradient). Let's talk about linear gradient today . With webkit Take the kernel browser as an example , grammar : div ...

  10. css3 in “ The gradient ” Compatibility solutions

    This time, let's talk about the compatibility of our common gradients in various browsers , It's a relatively simple question . Well known browsers are Chrome.Firefox.Opera.Safari as well as ie series . The most basic background: ...

Random recommendation

  1. mysql Batch execution sql file

    1. Execu sql File for 1.sql.2.sql.3.sql.4.sql etc. 2. Write a batch.sql file : source .sql; source .sql; source .sql; source ...

  2. CSS Basics (01)

    1. Css Basics 1.1 CSS( Cascading style sheets Multiple Styles)   CSS yes Cascading Style Sheets( Cascading style sheets ) For short . CSS Language is a kind of markup language , It doesn't need it. ...

  3. BZOJ 2631: tree( LCT )

    LCT... A little trouble ... -------------------------------------------------------------------------------- #inclu ...

  4. Inno Setup introduction ( eighteen )&mdash;&mdash;Inno Setup Class reference (4)

    classification : Install Setup 2013-02-02 11:29 406 Human reading Comment on (0) Collection report Edit box The edit box is also called the text box , It's a typical window visualization component , It can be used to enter text , It can also be used to display text , yes ...

  5. numpy Address

    pip install   http://zhidao.baidu.com/link?url=nkRwDOZ1ALMjRsWHGMR1nLSIyuVycoD4j-mhGDsYptPwDRGYcE8u4_B9VvYk ...

  6. warnings.warn(&quot;allowed_domains accepts only domains, not URLs. Ignoring URL entry %s in allowed_doma

    The following exception is thrown for multi page circular crawling data warnings.warn("allowed_domains accepts only domains, not URLs. Ignoring URL ent ...

  7. Leetcode 347. front K High frequency elements By Python

    Given a non empty array of integers , Before returning the frequency of occurrence k High element . Example 1: Input : nums = [1,1,1,2,2,3], k = 2 Output : [1,2] Example 2: Input : nums = [1], ...

  8. Integer Weird features

    package Code testing ; public class ceshi { public static void main(String[] args) { Integer i1=100; Integer ...

  9. spring In the integration shiro

    Shiro All of the components are JavaBean/POJO Modular components , So it's very easy to use Spring Component management , It's very convenient to learn from ini Configuration migrated to Spring Conduct management , And support JavaSE Application and Web Application Integration . In show ...

  10. python Report errors IndexError: list index out of range

    Write a story today ping vpn Of python Script , Report errors IndexError: list index out of range The last view is python Space in read file Remove the space