css Sprite(雪碧图丨精灵图)指什么？有什么作用
雪碧图就是把一些小图片利用软件合并到一张图片上，利用position的方法定位。
可以减少网络请求，加快网页显示速度。
img标签和css背景使用图片在使用场景上有何区别
在不用有点击作用、只是修饰作用并且不长更换的使用背景图片。
对于需要和用户有交互效果的，或者点击有链接效果的使用img
title 和 alt属性分别有什么作用
title是鼠标滑过选定元素（停留）时显示的描述性文字，可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。
alt是选定元素不能显示时显示的文字，它可以比title更明确地告诉使用者不能显示的是什么内容，alt是必要的属性，alt属性只能用在img、area和input元素中。
background: url(abc.png) 0 0 no-repeat;这句话是什么意思
是用url引用图片abc.png作为背景，即用图片作为背景。
0 0是图片的偏移数，第一个0是X轴偏移量，第二个0是Y轴偏移量，0 0即是偏移量都为0。 no-repeat是不重复，repeat是重复，即引入一张图片是显示一张还是有序排列。
background-size有什么作用? 兼容性如何? 常用的值是?
background-size：规定背景图像的尺寸。background-size:100px 100px; 设定背景图像尺寸宽高为100像素。宽高数值不能为负值。
常用的值：
contain:把图像图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。
cover：使背景图像比内容区域要大，完全填满内容区域，由于是完全填满，所以有些部分不可见
length：设置背景图像宽度和高度
percentage：以父元素的百分比来设置宽和高
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.div1{
height:200px;
width:200px;
background:url(奥运.jpg)0 0 no-repeat;
background-size:contain;
border:1px solid;
margin: 10px;
display: inline-block;
}
.div2{
height:200px;
width:200px;
background:url(奥运.jpg)0 0 no-repeat;
background-size:cover;
border:1px solid;
margin: 10px;
display: inline-block;
}
.div3{
height:200px;
width:200px;
background:url(奥运.jpg)0 0 no-repeat;
background-size:190px;
border:1px solid;
margin: 10px;
display: inline-block;
}
.first{
height:300px;
width:500px;
background:url(奥运.jpg)0 0 no-repeat;
background-size:200px 200px;
border:1px solid;
margin: 10px;
}
.div4{
height:200px;
width:200px;
background:url(奥运.jpg)0 0 no-repeat;
background-size:50% 50%;
border:1px solid;
margin-left:250px;
}
</style>
</head>
<body>
<div class="div1">1</div>
<div class="div2">2</div>
<div class="div3">3</div>
<div class="first">
<div class="div4">4</div>
5</div>
</body>
</html>
background-size
background-size兼容性
如何让一个div水平居中？如何让图片水平居中
div为块级元素，可以用margin:0 auto; 上下边距为0，左右自动的方法居中。
图片为行内元素，可以用text-align:center;居中
居中
如何设置元素透明? 兼容性？
元素透明使用opacity，opacity:0.0即使全透明，opacity:1.0就是不透明，
0.0到1.0之间透明度会逐渐加深。
opacity兼容性
opacity和 rgba都能设置透明，有什么区别
opacity对元素使用，rgba只能对背景使用。
opacity对子元素有影响，rgba没有影响。
****本文章版权属 饥人谷_张世钧和饥人谷 所有，如需转载请务必注明出处。****
网友评论