Background image positioning, css3 background, css3 color, css text, linear gradient, radial gradient

Background image positioning

• backbround-position: (attribute value)

• Definition: Specify the position of the inserted background image in the box, and the default is to display from the upper left corner.

• Positioning method:
  1. Pixel: backbround-position: (horizontal offset, vertical offset)
  X-axis positive value shifts to the right, negative value shifts to the left,
  Y-axis positive value shifts downward, negative value shifts upward
  2 , Percentage: the
  picture is in the upper left corner of the box backbround-position: (0%, 0%)
  in the lower right corner backbround-position: (100%, 100%)

• Pixel value represented by percentage: (width/height of the box-width/height of the picture itself)%
  If there is only one value, the default value is 50%. The value can also be a negative number.
  3. Word expression:
  top top
  bottom bottom
  center middle
  left left
  right right
  application scenarios:
  1. web page background
  2. advertising banner
  3. sprite image (it can improve the response speed of web pages and reduce server pressure)

scroll

• backbround-attachment
• Definition: Set whether the picture scrolls with the scrolling of the page.
• Property value:
• fixed The background image will be fixed and will not scroll as the page scrolls.
• scroll Set the background image to move with the movement of the scroll bar of the window

css3 background

• Background origin: backbround-origin:
• padding-box displays the background from the padding
• border-box displays the background from the border
• content-box displays the background from the content

Background crop

• background-clip
• The background image that exceeds the padding-box padding is cropped
• border-box The background image beyond the border is cut off
• The background image of content-box beyond the content is cut off

CSS3 colors

• Use rgba to express: a stands for transparency
  

CSS text

• text-shadow text shadow
• text-shadow Text shadow.
  Format:
  text-shadow: horizontal offset, vertical offset, blur, shadow color;
  
• Flame font

p{
    
    
            font-size: 60px;
            color: red;
            text-shadow: 0 0 4px #fff,0 -5px 4px #ff3,2px -10px 6px #fd3,-2px -15px 11px #f80,
            2px -25px 18px #f20;
        }

Box attributes

• box:

• Border rounded corners

           border-radius
               属性值：px 百分比
               border-radius：水平半径 垂直半径
           border-radius:10px;
           以10px为半径，画圆，以得到的弧度为边角。
  

        可以按照四个角来设置：
            border-top-left-radius: 50px;
            border-top-right-radius: 50px;
            border-bottom-left-radius: 50px;
            border-bottom-right-radius: 50px;

            border-radius: 左上 右上 右下 左下;
            省略的角度，取对角的值。

        半径写法：
            border-radius: 150px/200px; 水平半径/垂直半径

• Box shadow
  box-shadow
  format: box-shadow: horizontal offset vertical offset blur degree shadow size shadow color inner shadow/outer shadow
  

Linear gradient

• Linear gradient:
  Format:
  background-img:liner-gradient (direction, start color... end color);

   方向：to left,to right,to top,to bottom  
   
   角度 deg
  

Radial gradient

• Radial gradient
  background-img: radial-gradient (the position of the center of the radius of the radiation, the starting color, ... the ending color);

• The position of the center of the color radiating outward:
  1. The word
  at center
  at left
  at top
  at right
  at bottom
  2. px
  is shifted according to the upper left corner

• eg：

 .box{
    
    
            width: 300px;
            height: 300px;
            border-radius: 50%;
            background-image: radial-gradient(100px at center, rgb(255, 243, 122) 0%, rgb(255, 102, 145) 97.4%);
        }