CSS (four): background + morph

<span id="Label3"></p> <ul> <ul> <li>Background-origin</li> </ul> </ul><p><p>Sets the original starting position of the Element's background picture. must ensure that the background is background-repeat for no-repeat<br>This property will not take Effect.<br>Desirable values are Border-box | Padding-box | Content-box</p></p><p><p>Border-box: Set background picture origin in the top left corner of the border</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre><pre>1. img{2 background-image:url (1.jpg); 3 background-repeat:no-repeat;4 background-origin:border-box;5 }6 7 <div class= "img" ></div></pre></pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p>Padding-box: Set background image origin the leftmost upper-left corner of the margin</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre><pre>1. img{2 background-image:url (1.jpg); 3 background-repeat:no-repeat;4 background-origin:padding-box; 5}6 7 <div class= "img" ></div></pre></pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p>Content-box: Set background picture origin in the top left corner of the content area</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre><pre>1. img{2 background-image:url (1.jpg); 3 background-repeat:no-repeat;4 background-origin:content-box; 5}6 7 <div class= "img" ></div></pre></pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span> <ul> <ul> <li>Background-clip</li> </ul> </ul><p><p>Sets the area of the background image to be cropped outwards.<br>Desirable values are Border-box | Padding-box | Content-box</p></p><p><p>Border-box: sets the clipping area to be within the border, including the border</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre><pre>1. img{2 background-image:url (1.jpg), 3 background-clip:border-box;4}5 6 <div class= "img" ></div ></pre></pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p>Padding-box: sets the clipping area to within the inner margin, including the inner margin</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre><pre>1. img{2 background-image:url (1.jpg), 3 background-clip:padding-box;4}5 6 <div class= "img" ></div ></pre></pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p>Content-box: set crop area as content area</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre><pre>1. img{2 background-image:url (1.jpg), 3 background-clip:content-box;4}5 6 <div class= "img" ></div ></pre></pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span> <ul> <ul> <li>Transform</li> </ul> </ul><p><p>Change the size of the element, transparency, rotation angle, twist degree and so On.<br>Grammar:<br>Transform:none | <transform-function>+<br>Transform-function contains the following methods:<br>Translate (): Specifies the 2D translation (2D Translation) of the Object. The first parameter corresponds to the x-axis, and the second parameter corresponds to the Y-axis. If the second parameter is not provided, the default value is 0<br>Transform-origin: any element has a center point, by default its center point is 50% of the Element's x-axis and Y-axis.<br>TranslateX (): Specifies the translation of the x-axis (horizontal Direction) of the object<br>Translatey (): Specifies the translation of the Y-axis (vertical Direction) of the object<br>Rotate (): Specifies the 2D rotation (2D Rotation) of the object, preceded by the definition of < ' transform-origin ' > property<br>Scale (): Specifies the Object's 2D scales (2D scaling). The first parameter corresponds to the x-axis, and the second parameter corresponds to the Y-axis. If the second parameter is not provided, the value of the first parameter is taken by default<br>Skew (): Specifies the object skew transformation (oblique-cut twist). The first parameter corresponds to the x-axis, and the second parameter corresponds to the Y-axis. If the second parameter is not provided, the default value is 0<br>Translate3d (): Specifies the 3D displacement of the Object. The 1th parameter corresponds to the x-axis, the 2nd parameter corresponds to the y-axis, the 3rd parameter corresponds to the z-axis, and the parameter does not allow omitting</p></p><p><p>Translate: offset 50% of the element itself to the X and Y axes, respectively</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre><pre>1. img{2 width:200px;3 height:200px;4 background-image:url (1.jpg); 5 transform:translate (50%,50 %); 6}7 8 <div class= "img" ></div></pre></pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p>Transform-origin: sets the center point of the element to the 0 0 position, which is the upper-left corner</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre><pre>1. img{2 width:200px;3 height:200px;4 background-image:url (1.jpg); 5 transform-origin:0 0;6 transform:translate (50%,50%); 7}8 9 <div class= "img" ></div></pre></pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p>TranslateX: sets the offset of the x-axis only</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre><pre>1. img{2 width:200px;3 height:200px;4 background-image:url (1.jpg); 5 Transform:translatex (50 %); 6}7 8 <div class= "img" ></div></pre></pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p>Translatey: sets the offset of the y-axis only</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre><pre>1. img{2 width:200px;3 height:200px;4 background-image:url (1.jpg); 5 transform:translatey (50%); 6 }7 8 <div class= "img" ></div></pre></pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p>Rotate: sets the element for 2D rotation and accepts the argument as an angle (deg)</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre><pre>1. img{2 width:200px;3 height:200px;4 background-image:url (1.jpg); 5 transform:rotate (180deg); 6 }7 8 <div class= "img" ></div></pre></pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p>Scale: sets the element to be scaled 3 times times, the accepted parameter is a numeric value, which represents a multiple of magnification</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre><pre>1. img{2 width:200px;3 height:200px;4 background-image:url (1.jpg); 5 transform:scale (3); 6}7 8 <div class= "img" ></div></pre></pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p>Skew: Setting the tilt angle of an element</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre><pre>1. img{2 width:200px;3 height:200px;4 background-image:url (1.jpg); 5 transform:skew (60deg); 6}7 8 <div class= "img" ></div></pre></pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p>Translate3d: Setting the 3d displacement of an element</p></p><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><pre><pre>1. img{2 width:200px;3 height:200px;4 background-image:url (1.jpg); 5 transform:translate3d (50px , 50px,1px); 6}7 8 <div class= "img" ></div></pre></pre><span class="cnblogs_code_copy"><span class="cnblogs_code_copy"></span></span><p><p>CSS (four): background + morph</p></p></span>