1.CSS background属性与background-image属性
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了1.CSS background属性与background-image属性相关的知识，希望对你有一定的参考价值。
参考技术A 在书写css样式时，background属性与background-image经常用来设置背景图片，容易搞混。background属性包含background-image属性，是在一个声明中设置所有的背景属性。
连background-image在内，background属性包含以下：
background-color 规定要使用的背景颜色。1
background-position 规定背景图像的位置。1
background-size 规定背景图片的尺寸。3
background-repeat 规定如何重复背景图像。1
background-origin 规定背景图片的定位区域。3
background-clip 规定背景的绘制区域。3
background-attachment 规定背景图像是否固定或者随着页面的其余部分滚动。1
background-image 规定要使用的背景图像。1
inherit 规定应该从父元素继承 background 属性的设置。1
通常在写css的时候，一般都直接用background做全局设置，不单独去设置。
用background做全局设置时，要将所有背景属性写在一个声明中
body background: red
p background: url("chess.png") 40% / 10em gray round fixed border-box;
分拆写法如下
body
background-color: red;
background-position: 0% 0%;
background-size: auto;
background-repeat: repeat;
background-clip: border-box;
background-origin: padding-box;
background-attachment: scroll;
background-image: none
p
background-color: gray;
background-position: 40% 50%;
background-size: 10em 10em;
background-repeat: round;
background-clip: border-box;
background-origin: border-box;
background-attachment: fixed;
background-image: url(chess.png)
background：no-repeat scroll 0px 0px / 300px 300px rgba(0, 0, 0, 0);
background-position与background-size之间 必须用 / 做分割
前面是background-position 后面是 background-size
创建节点及其属性
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>创建节点及其属性</title>
</head>
<style>
#listShow>li ul{
display: none;
}
#listShow>li>a{
background:#ccc;
}
li{
list-style: none;
}
</style>
<body>
<div id="listS">
</div>
</body>
</html>
<script>
/*创建节点的js不能写在要创建节点位置的html前面，否则js就会失效*/
var element=document.getElementById(‘listS‘);
/*创建p标签*/
var createP=document.createElement(‘p‘);
var node=document.createTextNode(‘这是创建的p标签‘);
createP.appendChild(node);
element.appendChild(createP);
/*创建div标签*/
var createP1=document.createElement(‘div‘);
var node1=document.createTextNode(‘这是创建的div标签‘);
createP1.appendChild(node1);
element.appendChild(createP1);
/*创建a标签至li标签中*/
var createLi=document.createElement(‘li‘);
var createA=document.createElement(‘a‘);
createA.href=‘#‘;
createA.innerHTML=‘这是创建a标签‘;
createLi.appendChild(createA);
element.appendChild(createLi);
/*创建ul>li>a标签*/
var createUl=document.createElement(‘ul‘);
var createLi1=document.createElement(‘li‘);
var createLi2=document.createElement(‘li‘);
var createA1=document.createElement(‘a‘);
var createA2=document.createElement(‘a‘);
var nodeLi1=document.createTextNode(‘这是创建ul>li>a标签‘);
var nodeLi2=document.createTextNode(‘这是创建ul>li>a标签2‘);
createA1.href=‘#‘;
createA2.href=‘#‘;
createA1.appendChild(nodeLi1);
createA2.appendChild(nodeLi2);
createLi1.appendChild(createA1);
createLi2.appendChild(createA2);
createUl.appendChild(createLi1);
createUl.appendChild(createLi2);
element.appendChild(createUl);
/*创建input标签*/
var createInput=document.createElement(‘input‘);
createInput.value=‘‘;
createInput.setAttribute(‘type‘,‘text‘);
element.appendChild(createInput);
/*创建input标签中创建button按钮*/
var createInput1=document.createElement(‘input‘);
createInput1.setAttribute(‘value‘,‘按钮‘);
createInput1.setAttribute(‘type‘,‘button‘);
element.appendChild(createInput1);
/*创建button标签*/
var createButton=document.createElement(‘button‘);
var nodeButton=document.createTextNode(‘这是创建的Button标签‘);
createButton.appendChild(nodeButton);
element.appendChild(createButton);
/*创建img标签*/
var createImg=document.createElement(‘img‘);
createImg.src=‘https://gd3.alicdn.com/imgextra/i3/261786115/TB26JieadYA11Bjy0FhXXbIwVXa_!!261786115.jpg‘;
element.appendChild(createImg);
/*创建hr标签*/
var createHr=document.createElement(‘hr‘);
element.appendChild(createHr);
/*创建i标签*/
var createI=document.createElement(‘i‘);
var nodeI=document.createTextNode(‘这是创建的i标签‘);
createI.appendChild(nodeI);
element.appendChild(createI);
/*创建br标签*/
var createBr=document.createElement(‘br‘);
element.appendChild(createBr);
/*创建b标签*/
var createB=document.createElement(‘b‘);
var nodeB=document.createTextNode(‘这是创建的b标签‘);
createB.appendChild(nodeB);
element.appendChild(createB);
</script>
以上是关于1.CSS background属性与background-image属性的主要内容，如果未能解决你的问题，请参考以下文章