Shulou(Shulou.com)06/02 Report--

The main content of this article is to explain "what CSS backgroundImage skills are easy to use". Interested friends may wish to have a look. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn what CSS backgroundImage skills are easy to use.

1. How can the background fit the viewport perfectly

It is easy to fit the background image to the viewport, using the following CSS:

Body {background-image: url ('https://images.unsplash.com/photo-1573480813647-552e9b7b5394?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2253&q=80'); background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover;-webkit-background-size: cover;-moz-background-size: cover;-o-background-size: cover;})

two。 How to use multiple background pictures in CSS?

What if I want to add more than one image to the background? multiple background paths can be specified directly in CSS3, as shown below:

Body {background-image: url (https://image.flaticon.com/icons/svg/748/748122.svg), url (https://images.unsplash.com/photo-1478719059408-592965723cbc?ixlib=rb-1.2.1&auto=format&fit=crop&w=2212&q=80); background-position: center, top; background-repeat: repeat, no-repeat; background-size: contain, cover;})

3. How to create a background image of a triangle

Another cool background special effect is the triangular background, which is even better when we want to show some completely different options (such as day and night or winter and summer).

The idea is that you first create two div, then add both backgrounds to them, and then the second div draws triangles using the clip-path attribute.

"html"

"css"

Body {margin: 0; padding: 0;} div {position: absolute; height: 100vh; width: 100vw;} .day {background-image: url ("https://images.unsplash.com/photo-1477959858617-67f85cf4f1df?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2613&q=80"); background-size: cover; background-repeat: no-repeat } .night {background-image: url ("https://images.unsplash.com/photo-1493540447904-49763eecf55f?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"); background-size: cover; background-repeat: no-repeat; clip-path: polygon (100vw 0,0% 0vh, 100vw 100vh);}

4. How do I add an overlay gradient to a background image?

Sometimes we want to add some text to the background, but some pictures are too bright to see the words clearly, so here we need to add some dark music to the background image to highlight the text effect.

For example, you can enhance the sunset image by adding a pink-orange gradient or a red to transparent gradient, which is easy to do with superimposed gradients.

"css"

Body {background-image: linear-gradient (4deg, rgba) 30%, rgba (213 background-size 49) 127Power0.3) 45%, rgba (232Meijie 127Power0.3) 100%, url ("https://images.unsplash.com/photo-1503803548695-c2a7b4a5b875?ixlib=rb-1.2.1&auto=format&fit=crop&w=2250&q=80"); background-size: cover; background-repeat: no-repeat; background-attachment: fixed; background-position: center}"

5. How to create a background with dynamic color changes

If you have a lot of colors and you want to determine which color is more suitable for the background picture, the technique of changing the background color dynamically is very useful.

"css"

HTML CSSResult EDIT ON @ keyframes background-overlay-animation {0% {background-image: linear-gradient (4deg, rgba) 50%, rgba (255Magne 78lem36) 0.3), url ("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");" } 25% {background-image: linear-gradient (4deg, rgba (213 ~ 49 ~ (127 ~ 0.3) 50%, rgba (213 _ 49 ~ 127 ~ 0.3), url ("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"); } 50% {background-image: linear-gradient (4deg, rgba (36, 182, 255, 0.3) 50%, rgba (36, 182, 255, 1) 100%, url ("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"); } 100% {background-image: linear-gradient (4deg, rgba (0pet255, 254Power0.3) 50%, rgba (0meme255, 254Power0.3) 100%, url ("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"); } @-webkit-keyframes background-overlay-animation {0% {background-image: linear-gradient (4deg, rgba) 50%, rgba } 25% {background-image: linear-gradient (4deg, rgba (213 ~ 49 ~ (127 ~ 0.3) 50%, rgba (213 _ 49 ~ 127 ~ 0.3), url ("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80"); 50% {background-image: linear-gradient (4deg, rgba) 50%, rgba 100%), url ("https://images.unsplash.com/photo-1559310589-2673bfe16970?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2250&q=80");} 100% {background-image: linear-gradient (4deg, rgba) 50%, rgba (0Med 255)

6. How to make a mesh background image?

Sometimes we will encounter some projects that need art or photography, and they generally require the website to have art information and creativity. The background of the network is very creative, and the effects are as follows:

"HTML"

"scss"

Body {margin: 0; padding: 0;} .container {position: absolute; width: 100%; height: 100%; background: black; display: grid; grid-template-columns: 25fr 30fr 40fr 15frr; grid-template-rows: 20fr 45fr 5fr 30frr; grid-gap: 20px; .item _ img {background-image: url ('https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2207&q=80'); Background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover;}}

7. How do I set the background image to the text color?

Using background-image and background-clip, you can achieve the beautiful effect of the background image on the text. It can be very useful in some cases, especially if we want to create a larger text title that is not as boring as a normal color.

"HTML"

Hello world!

"SCSS"

Body {margin: 0; padding: 0;} .container {position: absolute; width: 100%; height: 100%; background: black; display: grid; grid-template-columns: 25fr 30fr 40fr 15frr; grid-template-rows: 20fr 45fr 5fr 30frr; grid-gap: 20px; .item _ img {background-image: url ('https://images.unsplash.com/photo-1499856871958-5b9627545d1a?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=2207&q=80'); Background-repeat: no-repeat; background-position: center; background-attachment: fixed; background-size: cover;}} at this point, I believe you have a deeper understanding of "what CSS backgroundImage skills are good to use". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.