CSS background 背景

CSS background 背景

<style> #myDIV { width: 100%; height: 100%; background-image: url("https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhxD-6RBJSBx12UyAThuNXdazNxZjBl_JJgt9BbiS-q-hmS4uLUz28_serRkmiWUR8HTDb0n-TmeEY7AGQPnXzXzKwRY0QS1qBogtOlVWk8HKUqrllrIwfuP2vRG4F80SKj5q2tSZ-HTk7v/s1600/images.jpg"); /*背景圖案*/ background-size: 100px 100px; /*底圖就會依照區塊的大小，等比縮放到區塊中*/ background-position: center; /*置中*/ background-repeat: no-repeat; /*背景圖案不重複*/ background-color:gray; /*背景的顏色*/ font-size : 25px ; color:black; } #myDIV select {background:rgba(0, 0, 0, 0) ; color:white; width:200px; font-size: 20px} #myDIV option {background-color: rgb(204, 204, 204 , 3);color:black;} #myDIV table {font-size: 20px ;} </style> <div id="myDIV"> <table border="0" style="font-size : 25px;"><tbody><tr><td rowspan="8" style="vertical-align:top" >div { </td><td colspan="3">width: 100% ; </td></tr><tr><td colspan="3">height: 100%; </td></tr><tr><td colspan="3">background-image : url("https://xxx.jpg") ; </td></tr><tr><td>background-size :</td><td id="Bgsize"></td><td><select id="Swidth" onchange="myDIV.style.backgroundSize = this.value;DPcss();this.selectedIndex=0" > <option value="" style="display:none;">background-size</OPTION> <option value="contain">contain</OPTION> <option value="cover">cover</OPTION> <option value="auto">auto</OPTION> <option value="100px 100px">100px 100px</OPTION> <option value="200px 200px">200px 200px</OPTION> <option value="200px">200px</OPTION> <option value="100% 100%">100% 100%</OPTION> <option value="80%">80%</OPTION> <option value="500px">500px</OPTION></SELECT> </td></tr><tr><td> background-position :</td><td id="Bgposition"></td><td><select id="Swidth" onchange="myDIV.style.backgroundPosition= this.value;DPcss();this.selectedIndex=0" > <option value="" style="display:none;">background-position</OPTION> <option value="left top">left top</OPTION> <option value="left center">left center</OPTION> <option value="left bottom">left bottom</OPTION> <option value="center top">center top</OPTION> <option value="center center">center center</OPTION> <option value="center bottom">center top</OPTION> <option value="right top">right top</OPTION> <option value="right center">right center</OPTION> <option value="right bottom">right bottom</OPTION> <option value="50% 50%">50% 50%</OPTION> <option value="30% 70%">30% 70%</OPTION> <option value="20px 200px">20px 200px</OPTION> <option value="50px 300px">50px 300px</OPTION> <option value="initial">initial</OPTION></SELECT> </td></tr><tr><td> background-repeat :</td><td id="Bgrepeat"></td><td><select id="Swidth" onchange="myDIV.style.backgroundRepeat= this.value;DPcss();this.selectedIndex=0" > <option value="" style="display:none;">background-repeat</OPTION> <option value="no-repeat">no-repeat</OPTION> <option value="repeat">repeat</OPTION> <option value="repeat-y">repeat-y</OPTION> <option value="repeat-x">repeat-x</OPTION> <option value="space">space</OPTION> <option value="round">round</OPTION> <option value="initial">initial</OPTION></SELECT> </td></tr><tr><td> background-color :</td><td id="Bgcolor"></td><td><select id="Swidth" onchange="myDIV.style.backgroundColor = this.value;DPcss();this.selectedIndex=0" > <option value="" style="display:none;">background-color</OPTION> <option value="red">red</OPTION> <option value="pink">pink</OPTION> <option value="gray">gray</OPTION> <option value="gold">gold</OPTION></SELECT> </td></tr></tbody></table> </div> <script>elem = document.querySelector('#myDIV'); style = getComputedStyle(elem); function DPcss() { //alert( ); Bgsize.innerHTML =style.backgroundSize + " ;" ; Bgposition.innerHTML =style.backgroundPosition + " ;"; Bgrepeat.innerHTML =style.backgroundRepeat + " ;"; Bgcolor.innerHTML = style.backgroundColor + " ; }" ; } DPcss(); </script>

00

#html CSS background 背景#html CSS background-size#html CSS background-position#html CSS background-repeat#html CSS background-color