Shulou(Shulou.com)06/01 Report--

This article mainly explains "how to write css background code". The content in the article is simple and clear, and it is easy to learn and understand. Please follow the editor's train of thought to study and learn "how to write css background code".

1. Css background figure 1.1 background properties css background properties .c1 {/ * specific writing * / width:600px; height:600px; border:solid 1px red; background-color: yellow / * controls the background image * / background-image:url (". / images/xiao.jpg"); / * controls whether the repeat-x repeat-y no-repeat repeat is tiled (default) * / background-repeat:no-repeat; / * controls the position of the background image Parameter 1 controls parameters up and down * / / * background-position: 50% 50%; * / * fixed background images use fixed to understand * / background-attachment: fixed;} .c2 {/ * abbreviated * / width:600px; height:600px Margin:10px 20px; border:solid 1px red; / * whether the picture is tiled [picture location] * / background: url (". / images/xiao.jpg") no-repeat 50% 50%;}

1.2 introduction of background picture into background picture / * Mouse over, light up the picture * / div.c1 {width:60px;height:60px;border:solid 1px gray;background: url (". / images/tag.jpg") no-repeat;} div.c1:hover {background: url (". / images/tag.jpg") no-repeat Background-position:-312px-3.5px;} .gg {width:400px; height:400px; border:solid 1px red;} / * Import of a picture * / div.c2 {background: url (". / images/xiao.jpg") no-repeat / * Parameter 1: width parameter 2: high 50px 50px / 100% * / * controls the size of the background image background-size: 100%; * / background-size: 100% auto } / * multiple images are imported * / div.c3 {background: url (". / images/game/map_19.gif") no-repeat 30px 80px, url (". / images/game/map_20.gif") no-repeat 50px 50px, url (". / images/game/map_18.gif") no-repeat 100px 50px Url (". / images/game/map_14.gif") no-repeat 180px 100px, url (". / images/game/map_03.gif") }

two。 Relative _ absolute _ fixed 2.1 relative positioning: relative positioning relative .gg {width:200px; height:200px; border:solid 1px red;} .c1 {background:violet;} .c2 {background:tan; position:relative Absolute positioning: absolute positioning: absolute positioning absolute .gg {width:200px Height:200px;border:solid 1px red;} .big {width:1000px; height:1000px; border:solid 1px red; margin:100px 220px;} .c1 {background:violet; / * invalid * / position: relative } .c2 {background:tan; position: absolute; top:0px; left:0px; / * bottom:0px; right:0px; * / / * z index. background:blue 1; * /} .c3 {background:blue } .c4 {background:green;} positioning: absolute positioning absolute .gg {width:200px;height:200px;border:solid 1px red;} .big {width:1000px; height:1000px; border:solid 1px red Margin:100px 220px;} .c1 {background:violet; / * invalid * / position: relative;} .c2 {background:tan; position: absolute; top:0px; left:0px; / * bottom:0px Right:0px; * / / * z background:green indexRose 1; * /} .c3 {background:blue;} .c4 {background:green } 2.3fixed positioning: the fixed positioning fixed / * * symbol represents a wildcard selector and represents all tags. The default tag contains default spacing, which should be removed at the beginning; * / * {margin:0px;padding:0px } body {height:2000px;} .c1 {width:500px; height: 600px; border:solid 1px red; background-color: green; position: fixed; left:50%; margin-left:-250px; top:50%; margin-top:-300px } / *: retrieve or set the properties of the object participating in the transition: retrieve or set the duration of the transition of the object: retrieve or set the type of animation of the transition in the object: retrieve or set the time of the delayed transition of the object * / img {position:fixed Bottom:20px; left:-100px; transition: all 1s ease 0.1s;} img:hover {left:0px; background-color: red;}

I didn't move.

1111222333444

3. Float floating 3.1 display conversion element display conversion element div / * display:inline; converted to inline element * / {display:inline;border:solid 1px red;width:1000px;height:20px;} span / * display:block; converted to block element * / {display:block;width:100px;height:50px;border:solid 1px red } a / * display:inline-block; converted to inline block element * / {display:inline-block;width:500px;height:30px;border:solid 1px red;} p / * display:none Hidden element * / {display:none;} first div second div I am span1 I am span2 I am Link 1 I am Link 2

12345

3.2 float floating float float .content {width:700px;clear:both;} .content .c1 {background: red;width:100px;height:100px;float:left;} .content .c2 {background: tan;width:100px;height:100px;float:left;} .content .c3 {background:blue;width:100px;height:100px;float:left } .content .c4 {background:green;width:100px;height:100px;float:left;} .content2 {width:700px;height:500px;border:solid 1px red;clear:both;} # a1 {float:left;width:100px;height:100px;border:solid 1px red;} # a2 {display:block;width:100px;height:100px;border:solid 1px red;background: teal;clear: both } Click I jump 1 Click I jump 24. Bug4.1 float content collapse problem in html float float. Content {width:700px;clear:both;} .content .c1 {background: red;width:100px;height:100px;float:left } .content .c2 {background: tan;width:100px;height:100px;float:left;} .content .c3 {background:blue;width:100px;height:100px;float:left;} .content .c4 {background:green;width:100px;height:100px;float:left;} .content2 {width:700px;height:500px;border:solid 1px red;clear:both } # a1 {float:left;width:100px;height:100px;border:solid 1px red;} # a2 {display:block;width:100px;height:100px;border:solid 1px red;background: teal;clear: both } Click I Jump 1 Click I Jump 2 4.2 margin-top failure problem margin-top failure problem * {margin:0px;padding:0px;} .box1 {width:100px;height:100px;margin-top:10px;border:solid 1px red {width:300px;height:300px;background: yellow;overflow: hidden;} .son {width:150px;height:150px;margin-top:50px;} sdfsf 12 4.3 overflow .test {overflow: hidden; width: 200px; height: 100px Background: # eee;}

Soda speed

Soda speed

Soda speed

Soda speed

Soda speed

Thank you for your reading, the above is the content of "how to write css background code". After the study of this article, I believe you have a deeper understanding of how to write css background code, and the specific use needs to be verified in practice. Here is, the editor will push for you more related knowledge points of the article, welcome to follow!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.