css精灵，显示隐藏

最新推荐文章于 2023-10-08 21:10:19 发布

照一江明月

最新推荐文章于 2023-10-08 21:10:19 发布

阅读量38

点赞数

文章标签：前端 css css3 html

本文链接：https://blog.csdn.net/w8666999/article/details/127217633

版权

一、css精灵

概述：

CSS精灵英文叫法 CSS sprites，通常被解释为“CSS 图像拼合” 或 “CSS 贴图定位”，其实就是把网页中一些背景图片整合到一张图片文件中，再利用 CSS “background-image”，“background- repeat”，“background-position”的组合进行背景定位，background-position 精确的定位出背景图片的位置。

1.1 精灵图的原理

1.1.1 实现步骤

通常要限定容器大小
图片拼合
背景定位

1.1.2 优缺点

优点

减少网页的 http 请求，从而大大的提高页面的性能
图片命名上的困扰
更换风格方便

缺点

必须要限定容器大小符合背景图元素位置
需要计算位置。

1.1.3 应用场景

适用于一般小图片（如小图标，小背景），不适合大背景大布局背景。

二、滑动门

概述：

为了使特殊形状的背景使能够自由拉伸滑动，以适应元素内部的文本内容，出现了CSS滑动门技术。最常见于各种导航栏的滑动门

2.1、实例预览

2.2、形象图示

2.3、实现要点

特殊背景拼合
内容自适应
- 浮动
行内块

实例

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            list-style: none;
        }
        .clearfix::after{
            display: block;
            content: "";
            clear: both;
        }
        li{
            height: 54px;
            line-height: 54px;
            float: left;
            background: url("./img/滑动门.png")no-repeat left top;
            padding-left: 65px;
        }
        a{
            text-decoration: none;
            color: #fff;
            display: block;
            height: 54px;
            padding-right: 20px;
            background: url("./img/滑动门.png")no-repeat right top;
        }
        li:hover{
            background-position: left -54px;
        }
        li:hover a{
            background-position: right -54px;
        }
    </style>
</head>
<body>
    <ul class="clearfix">
        <li><a href="">首页首页</a></li>
        <li><a href="">帮助与支持</a></li>
        <li><a href="">联系我们</a></li>
        <li><a href="">好看的客服小姐姐</a></li>
    </ul>
</body>
</html>

三、CSS显示隐藏

3.1 display:

none：隐藏该元素并且该元素所占的空间也不存在了。
block; 显示元素

visibility:

hidden 隐藏该元素但是该元素所占的空间还存在，即“隐身效果”。
visible 显示元素

三、透明度

3.1 opacity 透明

background: #000;
opacity: 0.3;
/*值：在0-1之间的小数
    0  全透明  1不透明
    0.XXXX 数字越小，越透明*/

使用说明：【一般用于调整图片或者模块的整体不透明度】
兼容性：IE6、7、8【不支持】，IE9及以上版本和标准浏览器都支持

3.2 rgba 透明

background:rgba(0, 0, 0,0.3);

 /*0, 0, 0  前三个指的是颜色第四个指的是 透明度
	同样是 0全透明   1不透明
	 0.XXXX 数字越小，越透明*/

区别：

opcacity 会让整体都透明，包含子元素

rgba 只让盒子自身透明，不包含子元素