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>
如何让一个div水平居中?如何让图片水平居中
div为块级元素,可以用margin:0 auto; 上下边距为0,左右自动的方法居中。
图片为行内元素,可以用text-align:center;居中
如何设置元素透明? 兼容性?
元素透明使用opacity,opacity:0.0即使全透明,opacity:1.0就是不透明,
0.0到1.0之间透明度会逐渐加深。
opacity和 rgba都能设置透明,有什么区别
opacity对元素使用,rgba只能对背景使用。
opacity对子元素有影响,rgba没有影响。
****本文章版权属 饥人谷_张世钧和饥人谷 所有,如需转载请务必注明出处。****