CSS基础知识梳理-background

来源：互联网发布：鬼影知乎编辑：程序博客网时间：2024/06/05 05:01
<!DOCTYPE html><html><head><meta charset="UTF-8"><title>css中的背景</title><style type="text/css">#p1 {/*设置元素的背景颜色,css1*//*js用法obj.style.backgroundColor="red";*/background-color: red;}#p2 {/*设置元素的背景颜色,css1*//*js用法obj.style.backgroundColor="#0f0";*/background-color: #0f0;}#p3 {/*设置元素的背景颜色,css1*//*js用法obj.style.backgroundColor="rgb(0, 0, 255)";*/background-color: rgb(0, 0, 255);}#p4 {/*设置元素的背景图片,图片会根据元素的大小自动截取,元素的背景占据了元素的全部尺寸,包括内边距和边框,但不包括外边距*//*默认的,背景图片位于元素的左上角,并在水平和垂直方向重复,如果同时给元素设置了背景颜色和背景图像,优先使用图像,如果图像不可用,则使用颜色*/background-image: url(topo.JPG);}body {/*设置元素的背景图像*/background-image: url(100.jpg);/*如果背景图片没有充满元素时,设置背景图片的重复方式(repeat表示在x,y方向重复;reprat-x表示在x方向重复,同理repeat-y;no-repeat表示不重复)*/background-repeat: no-repeat;/*设置背景图片的起始位置,可以使用top,bottom,left,right,center,如果只写一个,另外一个默认为center*//*也可以使用百分比数值,图片和元素的左上角都是0%,右下角是100%,如果规定了一个值,另一个值为50%,第一个值是水平方向,第二个值是竖直方向*//*也可以用使用像素值,与百分比数值不同的是,定位时不会改变背景图片的坐标,总是左上角去和元素的给定位置重合*/background-position: bottom 50%;/*设置背景图片是以文档为参照物还是以窗口为参照物,fixed表示以窗口为参照物,scroll表示以文档为参照物*/background-attachment: scroll;}</style><script type="text/javascript">function $(id) {return document.getElementById(id);}window.onload = function() {$("btnRandomColor").onclick = function() {$("p1").style.backgroundColor = "rgb(" + Math.round(Math.random() * 255) + ","+ Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + ")";$("p2").style.backgroundColor = "rgb(" + Math.round(Math.random() * 255) + ","+ Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + ")";$("p3").style.backgroundColor = "rgb(" + Math.round(Math.random() * 255) + ","+ Math.round(Math.random() * 255) + "," + Math.round(Math.random() * 255) + ")";}$("btnRandomImg").onclick = function() {document.body.style.backgroundPosition = Math.random() * 100 + "% " + Math.random() * 100 + "%";}}</script></head><body><p id="p1">background-color:red</p><p id="p2">background-color:#fff</p><p id="p3">background-color:rgb(0,0,255)</p><p id="p4">background-image:url(xxx.jpg)</p><input type="button" id="btnRandomColor" value="随机颜色" /><input type="button" id="btnRandomImg" value="随机图片位置" /><p>background-image:url(xxx.jpg)</p><p>background-image:url(xxx.jpg)</p><p>background-image:url(xxx.jpg)</p><p>background-image:url(xxx.jpg)</p><p>background-image:url(xxx.jpg)</p><p>background-image:url(xxx.jpg)</p><p>background-image:url(xxx.jpg)</p></body></html>
0 0