What are the background-related attributes in css? Introduction to css background properties-CSS Tutorial-php.cn

What are the background-related attributes in css? Introduction to css background properties

不言

Release： 2018-08-18 13:45:05

Original

5458 people have browsed it

What are the related attributes of css background? The following article will introduce you to the CSS background properties. It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

1. The css background attribute sets the background color for the content: background-color;
Attribute:
color;
inherit; inherit the parent style

box.html

<!doctype html>
<html>
<head>
    <mate charset="utf-8">
    <title>背景</title>
    <link href="box.css" type="text/css" rel="stylesheet">
    </head>
    <body>
    <p为内容设置背景色：background-color；</p>
    </body>
    </html>

Copy after login

box.css

body{    
background-color:#123456;
}

Copy after login

2. The css background attribute sets the background to the image background-image for the content. ：url();
box.css

body{
    background-color:#123456;    
    background-image:url(image.png);
    }

Copy after login

3. Fixed background image background-attachment of css background attribute
(use background-attachment in CSS The attribute can fix the image on the browser. If you drag the scroll bar, the background image will not scroll with the scrolling of the web page content, like text floating on the image)
Attribute value:
scroll;The background image will scroll with Content scrolling, default value
fixed; The background image is fixed and does not scroll with the content
inherit;Inherit the parent class style

box.css

body{
    background-color:#123456;    
    background-image:url(image.png);    
    background-attachment:fixed;    
    font-size: 45px;
    }

Copy after login

4, css background attribute Background image tile background-repeat;
Attribute value:
Repeat;Tile background image;Default
No-repeat;Do not tile images;
Repeat-x;Tile horizontally
repert-y; Tile in the vertical direction

box.css

 body{
     background-color:#123456;    
     background-image:url(image.png);    
     background-attachment:fixed;    
     font-size: 45px;    
     background-repeat: repeat-y;    
}

Copy after login

5. CSS background attribute background image positioning background-position
Attribute value:
top;Top
center;Middle
bottom;Bottom
right;Right
left;Left
inherit;Inherit parent style
Style:
xxxpx,xxxpx;
xxx%,xxx%;
xxxpx,top;

box.css

body{
    background-color:#123456;    
    background-image:url(image.png);    
    background-attachment:fixed;    
    font-size: 45px;    
    background-repeat:no-repeat;    
    background-position:left;
    }

Copy after login

Related recommendations:

CSS background you don’t know—Full solution to css background properties

Detailed explanation of css background property

The above is the detailed content of What are the background-related attributes in css? Introduction to css background properties. For more information, please follow other related articles on the PHP Chinese website!