Cet article présente principalement en détail la disposition flexible de la disposition élastique CSS3, qui a une certaine valeur de référence. Les amis intéressés peuvent se référer à
.container{ align-items: center; justify-content: center; display: flex; background: white url(image/baby.jpg) no-repeat center; background-size: auto 100%; } .text{ display: flex; align-items: center; height: 3rem; color: white; font-family: helvetica, sans-serif; font-size: 1.5rem; font-weight: bold; text-transform: uppercase; text-shadow:0 0 1.2rem hsla(0,100%,100%,.4); box-shadow: 0 0 1.5rem hsla(0,100%,0%,.4); border-radius: .5rem; }
pour s'adapter aux différentes versions :
html { height: 100%; font-size: 62.5%; /* 10px with default settings */ } body { margin: 0; height: 100%; width: 100%; /* width needed for Firefox */ /* old flexbox - Webkit and Firefox. For backwards compatibility */ display: -webkit-box; display: -moz-box; /* middle-aged flexbox. Needed for IE 10 */ display: -ms-flexbox; /* new flexbox. Chrome (prefix), Opera, upcoming browsers without */ display: -webkit-flex; display: flex; /* old flexbox: box-* */ -webkit-box-align: center; -moz-box-align: center; /* middle flexbox: flex-* */ -ms-flex-align: center; /* new flexbox: various property names */ -webkit-align-items: center; align-items: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-justify-content: center; justify-content: center; background: white url(image/baby.jpg) no-repeat center; background-size: auto 100%; } /* flexbox added below to show it works with anonymous boxes (e.g. text) as well It is not needed to center the heading itself. Rest of the styles are just to make the demo pretty and can be ignored. */ h1 { display: -webkit-box; display: -moz-box; display: -ms-flexbox; display: -webkit-flex; display: flex; -webkit-box-align: center; -moz-box-align: center; -ms-flex-align: center; -webkit-justify-content: center; justify-content: center; -webkit-box-pack: center; -moz-box-pack: center; -ms-flex-pack: center; -webkit-align-items: center; align-items: center; height: 10rem; padding: 0 3rem; /* background-color: hsla(0, 100%, 0%, .9); */ color: white; font-family: helvetica, sans-serif; font-size: 5rem; /* font shorthand doesn’t work with rem in IE10 */ text-transform: uppercase; text-shadow: 0 0 1.2rem hsla(0, 100%, 100%, .4); box-shadow: 0 0 1.5rem hsla(0, 100%, 0%, .4); border-radius: .5rem; }
Tutoriels vidéo CSS De nombreux didacticiels vidéo CSS en ligne peuvent être visionnés gratuitement !
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!