当前位置:网站首页>Research on the value of background repeat of background tiling
Research on the value of background repeat of background tiling
2022-07-05 05:02:00 【Fierce chicken】
The value of the background tile determines the repetition of the background image in the background of the visible area
background-repeat The value of
background-repeat
The acceptable value is :
repeat-x | repeat-y | [ repeat | space | round | no-repeat ]{
1, 2}
/* repeat-x and repeat-y Can only be used for single valued syntax , The remaining values can be used for single - and double valued syntax */
The following is a brief description of the functions of each value
Value | effect |
---|---|
repeat-x | Only in Repeat horizontally Background image , The last background image repeated horizontally will be cropped if it cannot fit |
repeat-y | Only in Repeat vertically Background image , The last background image repeated in the vertical direction will be cropped if it cannot fit |
repeat | The background picture will be in Repeat horizontally and vertically , The last background image repeated horizontally or vertically will be cropped if there is no room for it |
space | The image will be repeated as much as possible , Generally, it will not be cut ( Unless the image is too big to hold , here “ overflow ” Partially cropped ) The first and last images will be fixed on the corresponding edges of the element , At the same time, the white space will be evenly distributed between the images Unless only one image can be displayed without clipping ( This is equivalent to using no-repeat ), otherwise background-position Attributes are ignored —— The image can be evenly distributed in the background |
round | If the background space grows in size , The repeated image will stretch out ( No gaps ), Until there is enough space to add an image When you can add a new image , All current images will be compressed to make room , At this time, the original image will be properly compressed It is up to the browser to decide when to add an image , Instead of stretching —— Sure Zoom the background image autonomously , Put the picture completely into the background ( Even if the picture is too large, it can be put in completely ) |
no-repeat | The image will not be repeated ( The area where the background image is located may not be completely covered ) The position of the background image that is not repeated is determined by background-position Attribute to determine |
The effect of the above values is as follows :
round
The particularity of the value is , It will never cut the picture in any way . Here is a big background picture for each box , Only the value is round
The picture is complete , Because it enables the browser to scale the image appropriately , In order to display the complete picture
Double valued grammar
background-repeat
There are single value syntax and double value syntax , Single valued Syntax Just a Use a valueable , Is an ellipsis form of double valued grammar ( The following table ), It is also a common form ; So-called Double valued grammar That's right background-repeat
When setting the value Set two allowed values , These two values are separated by spaces , The first value is used to represent horizontal repetition behavior , The second value is used to represent the vertical repetition behavior
Single value | Equivalent to two valued |
---|---|
repeat-x | repeat no-repeat |
repeat-y | no-repeat repeat |
repeat | repeat repeat |
space | space space |
round | round round |
no-repeat | no-repeat no-repeat |
It can be known from the above table , Any value of single valued grammar is an omission of double valued grammar , It is the result of setting the horizontal repetition behavior and vertical repetition behavior of the background picture respectively under the double value syntax
The result of each value in single value grammar can be understood under the condition of understanding the role of each value , It's easy to guess what the effect is . Under the double value grammar , There are more combinations of values , And there are many combinatorial effects that single valued grammar cannot do , Especially when using double valued syntax , If used round
or space
, There will be many uncommon background image tiling effects
But in double valued syntax ,repeat-x
and repeat-y
Is not available
The following shows the effects of different values under several double valued grammars
Article source :https://gitee.com/thisismyaddress/bocheng-blogs/tree/master/css/ Background tile background-repeat Research on the value of
Reference resources :
https://developer.mozilla.org/zh-CN/docs/Web/CSS/background-repeat
边栏推荐
- 2022 thinking of mathematical modeling a problem of American college students / analysis of 2022 American competition a problem
- AutoCAD - graphic input and output
- Cocos progress bar progresstimer
- 【论文笔记】Multi-Goal Reinforcement Learning: Challenging Robotics Environments and Request for Research
- Download and use of font icons
- "Measuring curve length" of CAD dream drawing
- GameObject class and transform class of unity
- mysql审计日志归档
- xss注入
- Chinese notes of unit particle system particle effect
猜你喜欢
Recherche de mots pour leetcode (solution rétrospective)
Data is stored in the form of table
Emlog blog theme template source code simple good-looking responsive
嵌入式数据库开发编程(五)——DQL
Use assimp library to read MTL file data
2022 American College Students' mathematical modeling ABCDEF problem thinking /2022 American match ABCDEF problem analysis
"Measuring curve length" of CAD dream drawing
669. Prune binary search tree ●●
用 Jmeter 工具做个小型压力测试
Unity check whether the two objects have obstacles by ray
随机推荐
AutoCAD - feature matching
中国AS树脂市场调研与投资预测报告(2022版)
Dotween usage records ----- appendinterval, appendcallback
Use assimp library to read MTL file data
Cocos2dx screen adaptation
AutoCAD - Zoom previous
用 Jmeter 工具做个小型压力测试
Listview pull-down loading function
LeetCode之单词搜索(回溯法求解)
Ue4/ue5 illusory engine, material chapter, texture, compression and memory compression and memory
Out and ref functions of unity
[LeetCode] 整数反转【7】
This article is good
MD5绕过
MD5 bypass
猿人学第一题
嵌入式数据库开发编程(六)——C API
cocos_ Lua listview loads too much data
2022 / 7 / 1 Résumé de l'étude
《动手学深度学习》学习笔记