css ——搜索框（精灵技术)

一、搜索框（精灵技术)

未点击的效果图

点击后的效果图

html

<section class="shop-sousu">
               <input type="text" name="" id="" placeholder="搜索偶像、商品">
               <span class="sectbtn"></span>
              </section>

这里用的是sass写的（影响不大）css

.shop-sousu {
            display: flex;
            height: 30px;
            padding-top: 23px;
            padding-left: 200px;
            box-sizing: border-box;
            position: relative;


            input {
                border: none;
                width: 430px;
                height: 40px;
                background-image: url(/img/icon/search_icon.png);
                background-repeat: no-repeat;
                background-position: 0 -44px;
                background-color: transparent; //input背景色透明
                outline: none; //内框线去掉
                padding-left: 2em;
                
                // 选择获得焦点的输入字段
                &:focus {
                    background-position: 0 0;
                }
                // 放大镜按钮点击点击后
                &:focus+span {
                    display: block;
                    color: white;
                    // border: 1px solid red;
                    width: 20px;
                    height: 20px;
                    background-image: url(/img/icon/search_icon.png);//背景图片
                    background-repeat: no-repeat;//背景不平铺
                    background-position: -465px -52px;
                    position: absolute;//绝对定位
                    top: 32px;
                    right: 11px;
                }
            }

            // 放大镜按钮点击前
            .sectbtn {
                
                display: block;
                color: white;
                // border: 1px solid red;
                width: 20px;
                height: 20px;
                background-image: url(/img/icon/search_icon.png);
                background-repeat: no-repeat;
                background-position: -465px -10px;
                position: absolute;
                top: 32px;
                right: 10px;

            }


        }

:focus伪元素选择器：是选择获得焦点的输入字段，并设置其样式：例如：用户单击一个input输入框获取焦点，然后这个input输入框的边框样式就会发生改变，和其他的输入框区别开来，表明已被选中

结构伪类选择器：

选择符	简介
:firse-child	匹配父元素中的第一个子元素E
:last-child	匹配父元素中的最后一个子元素E
:nth-child(n)	匹配父元素中的第n个子元素E
:first-of-type	匹配指定类型E的第一个子元素
:last-of-type	匹配指定类型E的最后一个子元素
:nth-of-type(n)	匹配指定类型E的第n个子元素

背景颜色透明
background-color: transparent;
背景平铺
background-repeat : repeat | no-repeat | repeat-x | repeat-y

参数值	作用
repeat	背景图像在纵向和横向上平线（默认的）
no-repeat	背景图像不平铺
repeat-x	背景图片在横向上平铺
repeat-y	背景图像在纵向平铺

可以改变图片在背景中的位置
background-position : x y;

参数值	说明
length 百分数	由浮点数字和单位标识符组成的长度值
position top	center

设置背景图像是否固定或者随着页面的其余部分滚动
background-attachment : scroll | fixed

参数	作用
scroll	背景图像是随对象内容滚动
fixed	背景图像固定