Detailed explanation of the new background properties in CSS3

Detailed explanation of the new background properties in CSS3

Previously, we knew several attributes of background in CSS: color, image, repeat, attachment, position. These are commonly used in CSS, so what are the new attributes added in CSS3? Look down:

**

New CSS3 properties: background-clip, background-origin, background-size

1.background-clip

The clipping property of the background is to start drawing from the specified position.

**

**

2.background-origin

The background-origin property specifies the area where the background image is positioned.

** The above two property values ​​are border-box, padding-box, content-box (it is recommended to have a sufficient understanding of the box model, so just look at these 3 property values ​​here and it will be clear), or see the following picture:

insert image description here

Background-clip is equivalent to starting clipping at any of these three positions to achieve the corresponding effect. See the code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    #div1 {
      border: 20px dashed blue;
      padding:40px;
      background: red;
    }

    #div2{
      border: 20px dashed blue;
      padding:40px;
      background: red;
      background-clip: padding-box;
    }

    #div3{
      border: 20px dashed blue;
      padding:40px;
      background: red;
      background-clip: content-box;
    }
  </style>
</head>
<body>

<p>No background clipping (border-box not defined):</p>
<div id="div1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>I just sat there, and I felt so uncomfortable, and I was so tired.</p>
</div>

<p>background-clip: padding-box:</p>
<div id="div2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>I just sat there, and I felt so uncomfortable, and I was so tired.</p>
</div>

<p>background-clip: content-box:</p>
<div id="div3">
  <h2>Lorem Ipsum Dolor</h2>
  <p>I just sat there, and I felt so uncomfortable, and I was so tired.</p>
</div>
</body>
</html>

Effect picture:

insert image description hereinsert image description here

And background-origin is the area where the background is displayed. See the code

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    div
    {
      border:1px solid black;
      padding:35px;
      background-image:url('1 (5).jpg');/*If the image cannot be displayed, you need to change it yourself*/
      background-repeat:no-repeat;
      background-position:left;
    }
    #div1 {
      background-origin: border-box;/*Setting padding-box has the same effect, you can try it yourself*/
    }
    #div2 {
      background-origin: content-box;
    }
  </style>
</head>
<body>
<p>Relative position of the background image's bounding box</p>
<div id="div1">
  <h2>Lorem Ipsum Dolor</h2>
  <p>I just sat there, and I felt so uncomfortable, and I was so tired.</p>
</div>
<p>The background image is positioned relative to the content box</p>
<div id="div2">
  <h2>Lorem Ipsum Dolor</h2>
  <p>I just sat there, and I felt so uncomfortable, and I was so tired.</p>
</div>
</body>
</html>

Effect:

insert image description here

**

3.background-size

background-size specifies the size of the background image. Before CSS3, the size of a background image was determined by the actual size of the image. The background-size property in CSS3 allows us to resize background images in different environments. You can specify the size in pixels or percentage. The size you specify is a percentage relative to the width and height of the parent element.

Its attribute values:

①.length sets the height and width of the background image. The first value sets the width, the second the height. If only one value is given, the second is set to auto.

②.lpercentage will calculate the percentage relative to the background positioning area. The first value sets the width, the second the height. If only one value is given, the second is set to "auto"

③.cover will maintain the aspect ratio of the image and scale the image to the minimum size that will completely cover the background positioning area.

④.contain will maintain the aspect ratio of the image and scale the image to the maximum size that will fit within the background positioning area.

Summarize

The above is the new background properties of CSS3 that I introduced to you. I hope it will be helpful to you. If you have any questions, please leave me a message and I will reply to you in time. I would also like to thank everyone for their support of the 123WORDPRESS.COM website! If you find this article helpful, please feel free to reprint it and please indicate the source. Thank you!

<<:  Implementation of MYSQL (telephone number, ID card) data desensitization

>>:  Vue3 list interface data display details

Recommend

A detailed introduction to the Linux directory structure

When you first start learning Linux, you first ne...

MySQL database green version installation tutorial to solve system error 1067

What is the difference between the green version ...

Analysis of the principle of Rabbitmq heartbea heartbeat detection mechanism

Preface When using RabbitMQ, if there is no traff...

JavaScript functional programming basics

Table of contents 1. Introduction 2. What is func...

Common JavaScript memory errors and solutions

Table of contents 1. Timer monitoring 2. Event mo...

How to use VLAN tagged Ethernet card in CentOS/RHEL system

In some scenarios, we want to assign multiple IPs...

Record a slow query event caused by a misjudgment of the online MySQL optimizer

Preface: I received crazy slow query and request ...

Detailed explanation of the wonderful uses of SUID, SGID and SBIT in Linux

Preface Linux's file permission management is...

Vue+Openlayer uses modify to modify the complete code of the element

Vue+Openlayer uses modify to modify elements. The...

How to write CSS elegantly with react

Table of contents 1. Inline styles 2. Use import ...

Introduction to using data URI scheme to embed images in web pages

The data URI scheme allows us to include data in a...

Docker image import and export code examples

Import and export of Docker images This article i...

Vue template configuration and webstorm code format specification settings

Table of contents 1. Compiler code format specifi...