New background attributes in css3:
background-image background-size background-origin background-clip
background-image
In css3, you can add a background image through the background-image property. The different background images and images are separated by commas, and the topmost image in all the pictures is the first one .
You can set different attributes for different pictures:
#example1 { background-image: url(img_flwr.gif), url(paper.gif); background-position: right bottom, left top; background-repeat: no-repeat, repeat; }
It can also be written like this:
#example1 { background-image: url(img_flwr.gif) right bottom no-repeat,url(paper.gif) left top repeat; }
background-size
Specify the size of the background image. You can specify the background image in css3. Let's specify the size of the background image again in different environments. You can specify the pixel or percentage size. The specified size is relative to the width of the parent element and
The size of the percentage of height.
grammar:
background-size:length|percentage|cover|contain;
length: Set the height and width of the background image, the first value sets the width, and the second value sets the height.
percentage: Set the width and height of the background image as a percentage of the parent element.
cover: Expand the background image to be large enough so that the background image completely covers the background area. Certain parts of the background image are also not allowed to be displayed in the background positioning area.
contain: Extend the background image to its maximum size so that its width and height fully adapt to the content area.
background-size: contain; // reduce the image to fit the size of the element (maintain the aspect ratio of pixels);
background-size: cover; // expand the image to fill the element (maintain the aspect ratio of pixels);
background-size : 100px 100px; // adjust the image to the specified size;
background-size: 50% 100%; // adjust the image to the specified size, the percentage is relative to the size of the containing element.
background-origin
The background-origin attribute specifies the location area of the background image. content-box padding-box border-box
background-clip
The background-clip background clipping property is drawn from the specified position.
content-box (means to cut off the background part outside the content) padding-box (means to cut off the background part outside the padding)
border-box text (means to cut off the background part other than the border, so the final effect is the same as Figure 1, that is, border-box is the default property value of background-clip)
The difference between background-origin and background-clip:
background-origin specifies the position where the background image starts to be rendered, and background-clip simply cuts the background image roughly;
background-clip: text (meaning that the background part outside the text outline is cut off and only the part within the text outline is left, and at this time we only need to set the text to a transparent color to see the box background color through the text)
background-clip: text, currently need to add webkit prefix
css3 text effect
text-shadow
text-overflow : clip | ellipsis | string; clip: trimmed text, default. ellipsis: the trimmed text displays an ellipsis, string: use the given string to represent the trimmed text (currently only supported by Firefox)
If the word-wrap word is too long, it may exceed a certain area. The word-wrap attribute allows the text to force the text to wrap, which means that the word will be split; normal | break-word
The word-break attribute specifies the processing method for automatic line breaks . By using the word-break attribute, the browser can realize line breaks at any position. normal | keep-all | break-all
Compare the above chestnut settings word-break: break-all; and word-wrap: break-word
to sum up:
word-break: When a word cannot be placed at the end of the line, determine how to place it inside the word => determine whether the word will wrap when the word cannot be placed at the end of the sentence
break-all: Place it forcibly, and replace the rest with the next line.
keep-all: If you can't put it down, it will be displayed on another line; if you can't put it down, it will overflow.
word-wrap: When the end of the line cannot be put down, determine whether line breaks are allowed in the word => decide how to wrap lines in the word
normal: The word is too long, it is displayed on a new line, and overflows when it exceeds one line.
break-word: When the word is too long, try to break the line first; after the line is still too long, you can still break the line .
Reference: https://www.cnblogs.com/breezeljm/p/5728129.html