任务9-2 CSS常见技巧

作者: 饥人谷_任磊 | 来源:发表于2016-07-22 20:12 被阅读33次

1.CSS Sprite(雪碧图|精灵图)指什么? 有什么作用

CSS雪碧图就是把你要使用的一些小图标或背景图片合并成一张图片，然后使用CSS 的background-image、background-repeat和background-position等属性渲染，精确定位出你想要使用的图片部分。这样做可以减少加载网页图片时对服务器的请求次数，提高页面的加载速度，减少鼠标滑过的一些bug。
雪碧图在线合成网址工具-图片合并，
工具-图片在线压缩
demo：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Sprite</title>
        <style>
             .icon{
                width: 40px;
                height: 40px;
                 background: url(toolbars.png) 0 0 no-repeat;
             }
             .s1 {
                background-position: 0px 0px ;
             }
             .s2{
                background-position: 0px -40px
             }
        </style>
    </head>
    <body>
        <div class="icon s1"></div>
        <div class="icon s2"></div>
    </body>
</html>

Sprite

2.img标签和CSS背景使用图片在使用场景上有何区别

img属于HTML标签，适用于图片和内容相关的，会发生变化的场景，例如用户图像，验证码等。
background-img属于CSS属性，适用于页面上内容固定不变的场景，例如图标。
以京东主页样式举例：

京东主页

3.title和 alt属性分别有什么作用

title属性是提供非本质的额外信息，比如在图像可见时对图像的描述(鼠标放在图片时即会显示)。它可以用在除了base，basefont，head，html，meta，param，script和title之外的所有标签。
alt属性是为了给那些不能看到你文档中图像的浏览者提供文字说明，它只能用在img、area和input元素中，是用来替代图像而不是提供额外说明文字。
demo：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Sprite</title>
    </head>
    <body>
        ![我是要成为海贼王的男人](https://img.haomeiwen.com/i2419272/349cdf209a3bc8d5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        ![这是路飞](http://imgtn.bdimg.com/it/u=3987640784,323146945&fm=206&gp=0.jpg)
    </body>
</html>

title和alt区别

4.background: url(abc.png) 0 0 no-repeat;这句话是什么意思？

在解释这句话之前先了解一下background的全部属性：

值	描述	CSS
background-color	规定要使用的背景颜色。	1
background-position	规定背景图像的位置。	1
background-size	规定背景图片的尺寸。	3
background-repeat	规定如何重复背景图像。	1
background-origin	规定背景图片的定位区域。	3
background-clip	规定背景的绘制区域。	3
background-attachment	规定背景图像是否固定或者随着页面的其余部分滚动。	1
background-image	规定要使用的背景图像。	1

所以，background: url(abc.png) 0 0 no-repeat是一个background属性的简写模式，它的意思使用一个abc.png的图片作为背景图片，图片位置坐标为0 0，即不发生偏移，图片不重复。
demo：

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Sprite</title>
        <style type="text/css">
            .box {
                width: 400px;
                height: 250px;
                border: 3px solid gold;
                background: url(http://abc.png) 0 0 no-repeat;
            }
        </style>
    </head>
    <body>
        <div class="box"></div>
    </body>
</html>

效果

这里还要说一下关于背景图片定位(background-position)取值的问题：

（0，0）坐标原点位置，即外层块元素的左上角
background-position位置设定是指图片与坐标原点的偏移量
原点是不会动的，移动的是图片，X坐标值为正则图片左上角向右平移，为负则图片左上角向左平移，Y坐标值为正则图片左上角向下平移，为负则图片左上角向上平移

4.坐标除了用数字表示，还可以用百分比表示，

X轴：（容器的宽度-图片的宽度）乘以（X方向的百分数）
Y轴：（容器的高度-图片的高度）乘以（Y方向的百分数）

另外还可以使用关键字top、left、right、bottom、center来表示图片位置。

对照下图可以知道各个值定位的位置。

5.background-size有什么作用? 兼容性如何? 常用的值是?

background-size 属性用来规定背景图像的尺寸。
兼容性：

兼容性

常用的值：

值	描述
length	设置背景图像的高度和宽度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个值会被设置为“atuo”
percentage(%)	以父元素的百分比来设置背景图像的宽度和高度。第一个值设置宽度，第二个值设置高度。如果只设置一个值，则第二个会被设置为“auto”。
cover	把背景图像扩展至足够大，以使背景图像完全覆盖背景区域。背景图像的某些部分也许无法显示在背景定位区域中。
contain	把图像扩展至最大尺寸，以使其宽度和高度完全适应内容区域。

demo:

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <title>Sprite</title>
        <style type="text/css">
            div {
                width: 400px;
                height: 400px;
                margin: 20px;
                border: 3px solid gold;
                background: url(http://img5.imgtn.bdimg.com/it/u=3987640784,323146945&fm=206&gp=0.jpg) 0 0 no-repeat;
            }
            .box1{
                background-size: 300px 200px;
            }
            .box2{
                background-size: 50% 50%;
            }
            .box3{
                background-size: cover;
            }
            .box4{
                background-size: contain;
            }
        </style>
    </head>
    <body>
        <div class="box1"></div>
        <div class="box2"></div>
        <div class="box3"></div>
        <div class="box4"></div>
    </body>
</html>

auto
auto:此值为默认值，保持背景图片的原始高度和宽度

length
length:此值设置具体的值，可以改变背景图片的大小

percentage
percentage:此值为百分值，可以是0％〜100％之间任何值，所设置百分值将使用背景图片大小根据所在父元素的宽度的百分比来计算

cover
cover：此值是将图片放大，以适合铺满整个容器，当图片小于容器时，又无法使用background-repeat来实现时，我们就可以采用cover;将背景图片放大到适合容器的大小，但这种方法会使用背景图片失真

contain
contain:此值是将背景图片缩小或放大，能够使容器完全的显示图片，这个主要运用在，当背景图片大于元素容器时，而又需要将背景图片全部显示出来，此时我们就可以使用contain将图片缩小到适合容器大小为止，这种方法同样会使用图片失真

6.如何让一个div水平居中？如何让图片水平居中

div是块级元素，只要将块级元素的margin-left和margin-right的值为atuo即可。

demo：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <style type="text/css">
                .box1 {
                width: 400px;
                height: 400px;
                border: 3px solid gold;
                margin-left: auto;
                margin-right: auto;
        </style>
    </head>

    <body>
        <div class="box1">
            ![](https://img.haomeiwen.com/i2419272/349cdf209a3bc8d5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        </div>
    </body>

</html>

div水平居中

图片属于内联元素，想让内联元素水平居中在它的父元素的样式里设置text：align=center即可。
demo：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <style type="text/css">
                .box1 {
                width: 400px;
                height: 400px;
                border: 3px solid gold;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
        </style>
    </head>

    <body>
        <div class="box1">
            ![](https://img.haomeiwen.com/i2419272/349cdf209a3bc8d5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        </div>
    </body>

</html>

图片水平居中

7.如何设置元素透明? 兼容性？

可以使用opacity属性来设置元素的透明度，value从 0.0 （完全透明）到 1.0（完全不透明）。
demo：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <style type="text/css">
                .box1 {
                width: 400px;
                height: 400px;
                border: 3px solid gold;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
                opacity: 0.3;
        </style>
    </head>

    <body>
        <div class="box1">
            ![](https://img.haomeiwen.com/i2419272/349cdf209a3bc8d5.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        </div>
    </body>

</html>

元素透明

从图例中看出，只要对div设置了opacity属性，该div里面所有的内容都会受到影响。

兼容性：

opacity兼容性

8.opacity和rgba都能设置透明，有什么区别？

opacity会对元素内所有的内容设置透明度，而rgba只能对元素的颜色或者背景色设置透明度。
opacity的属性是能继承给后代的，而rgba不能。
demo：

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title>demo</title>
        <style type="text/css">
                div{
                width: 100px;
                height: 100px;
                border: 3px solid gold;
                margin-left: auto;
                margin-right: auto;
                text-align: center;
                   }
                   .box1{
                   background-color: rgb(0,255,0);
                    opacity: 0.3;
                   }
                   .box2{
                   background-color: rgba(0,255,0,0.3);
                   }
                   span{
                    color:red;
                   }
        </style>
    </head>

    <body>
        <div class="box1">
            <span>
                饥人谷前端学习
            </span>
        </div>
        <div class="box2">
            <span>
                饥人谷前端学习
            </span>
        </div>
    </body>

</html>

透明度对比

本文版权归本人和饥人谷所有，转载请注明来源。

网友评论

本文标题：任务9-2 CSS常见技巧

本文链接：https://www.haomeiwen.com/subject/bzabjttx.html

延伸阅读

深度阅读

您也可以注册成为美文阅读网的作者，发表您的原创作品、分享您的心情！