Article sync to public number: http://mp.weixin.qq.com/s?__biz=MzAxMzgwNDU3Mg==&mid=401626453&idx=1&sn= 6af07474df847d251358c4b453eaddfd#wechat_redirect
Interested can scan the code to pay attention to ha:
Background-position This style rule, the students who cut the page should have used it. As for its detailed introduction, we will not repeat it. http://www.cnblogs.com/huazaizai/archive/2010/11/03/1867907.html this blog has background-position relevant knowledge points described in detail.
When we set the value of backgrund-position to a percentage, how is the position of the background map calculated? When we specify background-position:50% 50%, the effect is actually equivalent to Backgrund-position:center center. Its calculation rules are:
The width of the x:{container (container)-the width of the background picture is}*x percent, and the excess portion is hidden.
The height of the y:{container (container)-the height of the background image is}*y percent, and the excess portion is hidden.
To express this clearly, the following two chestnuts are raised.
First there is such a picture of its width high as: 510*382
Then take a look at the following code:
<! DOCTYPE html>
<style type= "Text/css" >
. wrapper {
width:300px;
height:300px;
BORDER:2PX solid red;
Background-image:none;
}
</style>
<body>
<div class= "wrapper" ></div>
</body>
The actual effect of this is
This is just like the desired effect. When we set background-position:50% 50%, the effect is the following:
The formula x: (300-510) *50%=-105;y: (300-382) *50%=-41 according to the position of the background map above.
This is what I want to express in this blog when Background-position is designated as a percentage of the scene. However, know this god horse use? Chairman Mao has taught us that the purpose of learning lies in application. Even if you have a lot of theoretical knowledge, do not know where to use, do not know the use of the scene that is worthless.
When doing the mobile page, we will find a way to adapt to the screen size of various screens. This problem, on the PC side, is sometimes, too, to be considered. But is this a relationship with background-position and God? When we are doing some activity pages, backgroundposition can come in handy for those pages that are covered with a full screen.
For the PC-side activity page, the designer's design manuscript size is generally based on the width of 1920px. The container is usually only 1000px or 1200px in the size of the center. Assume that the content area is 1000px in size
In order to make the page in the 1000px width of the various browsers can be good display, this is the time for backgrundposition.
My usual practice is body {background:url (bg.jpg) 50% 0 No-repeat}
. Content {
widh:1000px
Margin-left:auto;
Margin-right:auto;
Overflow:hidden;
}
We designed the background of the design draft into a 1920-width background with the body background, and the position is set to: 50% 0. This allows the screen to display well above 1000px pixels. And it's self-adapting. This is the author's own business requirements for making pages about backgroundposition usage. If you also know other relevant usage scenarios or usage welcome to share the communication.
Background-position can also use this
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
