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

Thank you for meeting me. Hi, I’m Ken

Author: Please call me Ken link: juejin.cn/user/109118… Source: gold mining copyright belongs to the author. Commercial reprint please contact the author to obtain authorization, non-commercial reprint please indicate the source.

🌊🌈

Part of the content and pictures of this article are from the Internet. If you have any questions, please contact me (there is an official account in the introduction of the homepage).

This blog is suitable for those who are new to HTML and those who want to review after a long time

I was ashamed of the river

My life is wasted and I am tired

Haizi’s Dream as A Horse

🌊🌈 About:

5.3.10 Setting Multiple Background images

Prior to CSS3, a container could only be filled with one background image, and if repeated, the later background image would overwrite the previous one. CSS3 has enhanced the function of background images, allowing multiple background images to be displayed in a container. Make the background image effect easier to control. However, CSS3 does not provide the corresponding attributes for implementing multiple background images, Instead, attributes such as background-image, background-repeat, background-position and background-size are used to provide multiple attribute values to achieve multiple background image effects. Each attribute value is separated by commas.

Case study:

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Sets the cutting position of the background image</title>
<style type="text/css">

div{
width: 300px;
height: 300px;
border: lpx dotted # 999;
background-image:
url(#),
url(#),
url(#);
background-repeat:no-repeat;
background-position:bottom,right top,center;
}

</style>
</head>
<body>

<div>Set multiple background images</div>

</body>
</html>
Copy the code

First, three background images are defined by background-image attribute, then the tiling mode of the background images is set as “no-repeat”, and finally, the positions of the three background images are set respectively by background-position attribute. Where “bottom” is the same thing as “bottom center” for the position of the grass, “right top” for the position of the sun, “center” is the same thing as “Center Center” for the position of the sky.

5.3.11 Background

Like the border property, the background property is a compound property in CSS. You can define all the styles related to the background in one compound property. The syntax for setting a background style using the background attribute is as follows:

background:[background-color] [background-image] 
[background-repeat][background-attachment] 
[background-position] [background-size] 
[background-clip] [background-origin];
Copy the code

In the syntax above, the order of styles is arbitrary, and unwanted styles can be omitted.

Case study:

<! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Background compound property</title>
<style type="text/css">

div {
width:200px;
height:200px;
border:5px dashed #B5FFFF;
padding:25px;
background:#B5FFFF url(#) no-repeat left bottom padding-box;
}

</style>
</head>
<body>

<div>Through the world of mortals, bounce off the soul of the dust, with the feelings of light.</div>

</body>
</html>
Copy the code

The background color, background image, image tiling mode, background image position and clipping area are defined for div by using background compound attribute.

One more tip: Use background image properties to define list styles

List-style is a compound property that controls the style of list bullets. In the actual web page making process, in order to control the list bullet more efficiently, usually define the list-style property value to None, and then set the background image for

  • to implement different list bullet.

    • Case study:

    <! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Background property definition list bullet</title>.
<style type="text/css">

li{
list-style:none;/* Clear the default style of the list */
height:26px;
line-height:26px;
background:url(images/book.png) no-repeat left center; /* Set background image for li */
padding-left:25px;
}

</style>
</head>
<body>

<h2>The subject of intelligent podcasting</h2>
<ul>
<li>Web graphic</li>
<li>Java</li>
<li>PHP</li>
<li>.NET</li>
</u1>

</body>
</html>
Copy the code

    Defines an unordered list, where line 8 passes “list-style:none;” To clear the default display style of the list, line 11 defines the list bullet by setting the background image for

  • . Each list item is preceded by a list item image. If you need to adjust the list item image, just change the background style of
  • .

    • 5.4 CSS3 Gradient properties

    CSS3The gradient properties mainly include linear gradient and radial gradient.

    5.4.1 Linear gradient

    In linear gradient, the starting color is sequentially transited along a straight line to the ending color. “Background-image: linear gradient (parameter value); “Styles can achieve linear gradients,

    The basic syntax is as follows:

    background-image: Linear gradient (Zhejiang Angle, color value1The color value2. , color value n);Copy the code

    In the syntax above, iinear-gradient is used to define the gradient as a linear gradient, and parentheses are used to set the gradient Angle and color value.

    • Gradient Angle Gradient Angle is the Angle between the horizontal line and the gradient line. It can be an Angle value in deg or the keyword “to” plus “left” “right” “top” “bottom” etc. When setting the gradient starting point using an Angle, odeg is “to top”, 90deg is “to right”, 1800deg is “to bottom”, 270deg is “to left”, and the process rotates clockwise from bottom.

      When the gradient Angle is not set, it defaults to “180deg” which is equivalent to “to bottom “.

    • Color value The color value is used to set the gradient color. “Color value 1” indicates the start color and “color value n” indicates the end color. Multiple color values can be added between the start color and the end color, separated by commas (,).

      Case study:

    <! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Linear gradient</title>
<style type="text/ess">

div{
width:200px;
height:200px;
background-image:linear-gradient(30deg.#0f0.#00F);
}
/* Define a linear gradient of 30deg from green (#0f0) to blue (#00f) for div. * /

</style>
</head>
<body>

<div></div>

</body>
</html>
Copy the code

    The above code implements a linear gradient from green to blue. It is worth noting that a percentage value can be written after each color value to indicate the location of the gradient. Example code is as follows:

    background-image; linear-gradient (30deg.#0f0 50%.#00F 80%);
Copy the code

    In the above example code, think of it as green (#0f0) starting at 50% and blue (#00F) ending at 80%. An analogy can be used with the gradient block in Photoshop.

    5.4.2 Radial gradient

    Radial gradient is another common gradient used on web pages. In radial gradient, the starting color starts from a central point and expands according to the ellipse or circle shape. “Background-image :radial-gradient(parameter value); Style can achieve radial gradient effect,

    The basic syntax is as follows:

    background-image: radial-gradientGradient shape center position, color value1The color value2. , color value n);Copy the code

    In the syntax format above, the radial gradient is used to define the gradient, and the parameter values in brackets are used to set the gradient shape, center position, and color value.

    The detailed introduction of each parameter is as follows:

    1. The gradient shape

      The gradient shape is used to define the shape of the radial gradient. The value can be either the pixel value or percentage that defines the horizontal and vertical radius, or the corresponding keyword. The keywords mainly include two values “circle” and” ellipse”. \

      The specific explanation is as follows:

      ● Pixel value/percentage: Used to define the horizontal and vertical radii of the shape, such as “80px 50px” for an oval with a horizontal radius of 80px and a vertical radius of 50px.

      ● Circle: Specifies the radial gradient of the circle.

      ● Ellipse: Specifies the radial gradient of the ellipse.

    2. Center position

      The center position is used to determine the center position of the element gradient. “at” is used to define the center position of the radial gradient with a keyword or parameter value. This property value is similar to the background-position property value in CSS, and defaults to “center” if omitted. The values of this attribute are as follows:

      ● Pixel value/percentage: The horizontal and vertical coordinates used to define the center of a circle and can be negative.

      ● left: Sets the left side as the horizontal value of the center of a radial gradient circle.

      ● Center: Sets the abscess or ordinate with the center of the radial gradient circle in the middle.

      ● Right: Sets the value of the abscess on the right as the center of the radial gradient circle.

      ● top: set the vertical value with the top as the radial center.

      ● Bottom: Set the bottom as the vertical value of the radial gradient circle center.

    3. Color value

      Color value 1 indicates the start color, and color value n indicates the end color. Multiple color values can be added between the start color and the end color, separated by commas (,).

      Case study:

    <! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Radial gradient</title>
<style type="text/css">

div{
width:200px;
height:200px;
border-radius:50%;/* Set the rounded border */
background-image:radial-gradient(ellipse at center, #Of0,# 030);/* Set radial gradient */
}

</style>
</head>
<body>

<div></div>

</body>
</html>
Copy the code

    Define a gradient shape for the div as an oval shape, radial gradient position in the center of the container, green (#0f0) to dark green (#030) radial gradient; Also use the “border-radius” attribute to make the border of the container rounded.

    It is worth mentioning that, just like linear gradient, you can write a percentage value after the color value of radial gradient to set the gradient position.

    5.4.3 Repeat the gradient

    In web design, it is often the case that a gradient pattern is repeatedly applied to a background, and this is where the repeated gradient is needed. Repeated gradients include repeated linear gradients and repeated radial gradients, which are explained as follows:

    1. Repeated linear gradient

    In CSS3, by “background-image: repeating-iinear-gradient (parameter value); Styles can achieve repetitive linear gradients,

    The basic syntax is as follows:

    background-image: repeating-linear-gradientGradient Angle, color value1The color value2. , color value n);Copy the code

    In the syntax above,”Repeating-linear gradient(parameter value)“To define the gradient as repeated linear gradient. The values in parentheses are the same as those in linear gradient. They define the gradient Angle and the color value, respectively.

    Case study:

    <! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Repeated linear gradient</title>
<style type="text/css">

div{
width:200px;
height:200px;
background image: repeating-linear-gradient(90deg.#E50743.#E8ED30 10%.#3FA62E 15%);
}

</style>
</head>
<body>

<div></div>

</body>
</html>
Copy the code

    Define a repeat linear gradient of red, yellow and green at an Angle of 90deg for the div.

    2. Repeated radial gradient

    In CSS3, the parameter is passed by “background-image: repeating-radial-gradient(parameter value); “Styles can achieve repetitive linear gradients,

    The basic syntax is as follows:

    background-image: repeating-radial-gradientGradient shape center position, color value1The color value2. , color value n);Copy the code

    In the syntax above,”Repeating-radial -gradient(parameter value)The values in parentheses are the same as those in radial gradients. They are used to define the gradient shape, center position, and color value, respectively.

    <! doctypehtml>
<html>
<head>
<meta charset="utf-8">
<title>Repeated radial gradient</tit1e>
<style type="text/css">

div{
width:200px;
height:200px;
border-radius:50%;
background-image:repeating-radial-gradient(circle at 50% 50%.#E50743.#E8ED30 10%.#3FA62E 15%);
}

</style>
</head>
<body>

<div></div>

</body>
</html>
Copy the code

    Each gradient shape is defined as a circle for the div. The radial gradient position is in the center of the container. The three radial gradients are red, yellow and green.




    That’s the end of today’s introductory study

    Peace

    🌊🌈

    HTML page elements and attributes (Note 2) HTML page elements and Attributes (Note 3) Ken’s HTML, CSS starter guide _CSS3 selector (note 4) Ken’s HTML, CSS starter guide _CSS box model (note 5) one Ken’s HTML, CSS starter guide _CSS box model (note 5) two Ken’s HTML, CSS guide for getting started _CSS box model (note five) three

    Hi, I’m Ken

    Thank you for reading

    If there are flaws in the blog, please leave a message in the comment area or add the public account in the personal introduction to chat with me

    Thank you for your kind words