Background and border properties

This article has corresponding video explanation, convenient for everyone to understand more easily. Background, border properties, CSS Sprite illustration. Videos correspond to 64 to 71.

CSS Background and border properties is a module in CSS that allows you to style elements’ backgrounds and borders. Backgrounds can be filled with colors or images, cropped and resized, and otherwise modified. Borders can be decorated with lines or images and made into squares and circles. In addition, the frame of the element can be decorated with shadows.

Background properties
attribute Attribute values describe
background-color Word color notation, RGB, hexadecimal Sets the background color of the element
background-image url(‘www.aaa.com/1.png’) Sets one or more background images for an element
background-position Top,left,center, percentage, px, Set the initial position for each background image
background-repeat repeat-x|repeat-y|repeat|spance|round|no-repeat Defines how the background image repeats. The background image can be repeated along the horizontal axis, vertical axis, both axes, or not at all.

background-image

Set one or more background images for an element,

Grammar:

background-image:url('1.png')
Copy the code

The code is as follows:

<! DOCTYPEhtml>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>The background image</title>
	<style type="text/css">
		.bg{
			width: 450px;
			height: 450px;
			border: 3px solid #FC02FF;
			background-image: url('2.jpeg');
		}
	</style>
</head>
<body>
	<div class="bg">
		
	</div>
	
</body>
</html>
Copy the code

Effect display:

The image is tiled horizontally and vertically by default.

background-repeat

If you want the background image to be untiled, use background-repeat

Background-repeat property value

The numerical value describe
repeat The default value. Indicates that the background image is tiled horizontally and vertically
no-repeat Indicates that the background map is not tiled horizontally and in the direction of disposal
repeat-x Indicates that the background image is tiled horizontally only
repeat-y Indicates that the background image is tiled vertically only 
background-repeat:no-repeat;
Copy the code

background-position

This property represents the initial location of the background image location. Background-position is the combined attribute of background-position-x and background-position-y. If you want to use background-position, you must first specify background-image.

grammar

background-position:x  y;
background-position: position  position
Copy the code

The values

  • Key words: such as top, right, bottom, left and center

  • Length values: such as PX and em

  • Score: 50%

Also, its default value is: 0% 0%. The background image will be positioned in the upper left corner of the content area.

The most commonly used values and the best known values are keyword and length values. Percentages are also used, but the most commonly used values are 0%, 50%, and 100%.

background-position:top left; /* Background-position: 0 0; The same. * /
Copy the code

background-position:top right; /* Background image in the upper right corner */
Copy the code

background-position:top center; /* The background image is centered */
Copy the code

Then the total occurrence of the four attributes of top left center bottom is:

background-position:top left; /* top left corner */
background-position:top center;/* Top center */
background-position:top right;/* upper right corner */
background-position:center top;/* Center left */
background-position:center center;/* The center displays */
background-position:center right;/* Center right */
background-position:bottom left;/* lower left corner */
background-position:bottom center;/* Bottom center */
background-position:bottom right;/* Lower right corner */
Copy the code

If I set the length unit, for example

background-position:50px 100px;
Copy the code

If the value is set to negative, the background image is positioned in the opposite direction of x and y axes. In fact, through this positioning technology, we focus on the following Sprite map technology.

background-position: -20px -30px;
Copy the code

Well, as mentioned earlier, background-position can be a percentage value in addition to the length value and keyword value. Such as:

background-position:100% 0%; /*right top*/
background-position:50% 0%; /*top center*/
background-position:50% 50%;/*center center*/
background-position:50% 100%;/*center bottom*/
Copy the code

So the question is, do you really understand the calculation of background-position as a percentage? What if my percentage value is not the keyword equivalent? So how does it compute? Have you thought about this series of questions carefully? As far as I am concerned, there is also a misunderstanding in my previous understanding:

I’ve always understood the background-position percentage value, which is the size relative to the background image.

But in fact, this understanding is a mistake. That’s what I found in the pit today. Then immediately check the relevant specification documents, to thoroughly understand. Now, let’s talk about how background-position is a percentage.

The W3C specification describes it as follows:

A percentage for the horizontal offset is relative to (width of background positioning area – width of background image). A percentage for the vertical offset is relative to (height of background positioning area – height of Background image) where the size of the image is the size given by ‘background-size’.

That is, when background-size is not reset (i.e. 100% 100%), the horizontal percentage value is equal to the container width percentage value minus the background image width percentage value. The vertical percentage value is the container height percentage value minus the background image height percentage value.

For example, in the previous example, background-position: 75%, 50%; , the starting position of the background image:

  • Horizontal position (xAxis) :(456-100) * 75% = 262.5px
  • Vertical position (yAxis) :(456 - 100) * 50% = 175px

See the effect:

CSS Sprite

CSS Sprite graph technology: namely CSS Sprite, also known as CSS Sprite graph, is a kind of image piecing technology. The method is to merge multiple small ICONS and background images into one image, and then use CSS background positioning to display the part of the image that needs to be displayed. Let me give you a couple of examples. As shown in figure

The navigation on the left and the register now button on the right are displayed by positioning the Sprite image using CSS background positioning.

As shown in the picture, Sprite is common in web pages

Use scenarios of Sprite images

  • Static pictures do not change with the change of user information

  • Small picture, picture capacity is relatively small (2~ 3K)

  • The load is large

    Sprite is not recommended for some large images

advantages

  • Effectively reduce the number of HTTP requests
  • Accelerated content display

Each time a request is made, a connection is made to the server, and setting up a connection requires additional time overhead.

Sprite diagram realization principle

It controls the display of Sprite images through the BACKGROUND property of CSS backrground-position.

Control a layer, can display the area wide large message, through a window, carry on the background image movement.

Sprite picture making

This course uses Adobe IIIustrator to create Sprite images quickly.

Border attribute

When we explained the box model before, we mentioned the use of border. At that time, we used the form of three elements to divide the border. In addition to setting the thickness, color and linear style, what else can the border show?

For example, we want to make the square corners have rounded corners, make ellipses, circles, and even make the box appear shadow, which is not easy to achieve in CSS2. Therefore, we need to learn two CSS3 attributes: border-radius and border-shadow in order to learn the following stage of the project more conveniently.

border-radius

Traditional fillet generation schemes must use multiple images as the background pattern. With the advent of CSS3, we no longer have to waste time making these images, and there are many other advantages:

  • Reduce maintenance workload. Image file generation, updating, and writing web code are no longer required.
  • Improve web page performance. Web pages load faster because they no longer have to make multiple HTTP requests
  • Increased visual reliability. (network congestion, server error, slow connection, etc.), background images will fail to download, resulting in poor visual effects. That doesn’t happen with CSS3.

The CSS attribute border-radius allows you to set the rounded edges of an element’s borders. The meaning is “border radius”. The putty property provides a value to set the radius of all four corners at once. Attribute values can be expressed as em, px, or percentage.

For example, here is a div box:

Now set its rounded half Angle to 15px;

border-radius:15px;
Copy the code

This statement sets both hrizontal radius and vertical radius to 15px for each rounded corner;

Border-radius can set 1 to 4 values at the same time. If the value is set to 1, this value is used for all four rounded corners. If you set two values, the first value is used for the upper left and lower right corners, and the second value is used for the upper right and lower left corners. If three values are set, the first value is used in the upper left corner, the second value is used in the upper right and lower left corner, and the third value is used in the lower right corner. If four values are set, they correspond to the upper left corner, upper right corner, lower right corner, and lower left corner in clockwise order.

Border-radius can also set a second set of values with a slash. In this case, the first values represent the horizontal radius and the second values represent the vertical radius. The second set of values can also be set from 1 to 4, and the same rules apply

border-radius:15px 5px / 3px;
Copy the code

Single rounded corner setting

Instead of setting all four rounded corners at once, you can set each corner individually. For the four angles, CSS3 provides four separate attributes:

  • border-top-left-radius
  • border-top-right-radius
  • border-bottom-right-radius
  • border-bottom-left-radius

Each of these four attributes can be set to one or two values at a time. If the value is set to 1, the horizontal radius is equal to the vertical radius. If you set two values, the first value represents the horizontal radius and the second value represents the vertical radius.

border-top-left-radius: 15px;
Copy the code

border-top-left-radius: 15px 5px;
Copy the code

Example: border-radius effect

1. Implement a bezel-less circle

HTML part:

<div class="circle"></div>
Copy the code

The CSS part:

.circle{
    width: 200px;
    height: 200px;
    background-color: # 843172;
    border-radius: 50%;
}
Copy the code

2. Implement a circle

HTML part:

<div class="circle"></div>
Copy the code

The CSS part:

.circle{
    width: 200px;
    height: 200px;
    border: 3px solid #FC0107;
    background-color: # 843172;
    border-radius: 50%;
}
Copy the code

3. Make a semicircle

div {
  width: 200px;
  height: 100px;
  background-color: lightgreen;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
}
Copy the code

As a rule for making a semicircle, set the height to half the width, and set the radius of the top left and top right to half the width.

The box – shadow shadow

You can set the shadow of an element by using the box-shadow attribute

<! doctypehtml>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CSS shadow</title>
    <style>
        .box{
            width: 200px;
            height: 200px;
            background-color: red;
            box-shadow: 0 0 30px gray;
        }
    </style>
</head>
<body>
    <div class="box"></div>
</body>
</html>

Copy the code

Grammar:

box-shadow: h-shadow v-shadow blur color inset;
Copy the code
value describe
h-shadow A necessity. Position of horizontal shadows. Allow the negative
v-shadow A necessity. Position of vertical shadows. Negative values are allowed.
blur Optional. Blur the distance.
color Optional. Shadow color.
inset Optional. Set outset shadow to Internal shadow.