2022-06-15 学习记录--CSS-图片实现：上半部分灰色，下半部分原色+上半部分原色，下半部分灰色+左边部分灰色，右边部分原色+左边部分原色，右边部分灰色

小呀小萝卜儿

已于 2023-03-06 10:01:30 修改

阅读量408

点赞数 7

分类专栏：学习文章标签：学习 css 前端

于 2022-06-21 18:37:33 首次发布

本文链接：https://blog.csdn.net/weixin_48850734/article/details/125386568

版权

学习专栏收录该内容

34 篇文章 1 订阅

订阅专栏

CSS-图片实现：上半部分灰色，下半部分原色+上半部分原色，下半部分灰色+左边部分灰色，右边部分原色+左边部分原色，右边部分灰色

不积跬步无以至千里~ 细节决定成败，加油💪🏻

实现这四种时，其html是一样滴，只是css里部分不同喔~且可实现动态式哦☺️ 请往下看~

灰色是通过filter(滤镜) 属性实现滴，filter(滤镜) 属性的相关介绍可查看我的另外一篇文章哟❀：https://blog.csdn.net/weixin_48850734/article/details/120849194

一、图片实现：上半部分灰色，下半部分原色

1、实现效果

在这里插入图片描述

2、对应代码

HTML

<div class="teachers_intro">
    <ul>
        <li>
            <img class="bg_img" src="./img/test.png_720x720g.jpg" alt="">
            <div class="border_img">
                <img src="./img/test.png_720x720g.jpg" alt="">
            </div>
        </li>
    </ul>
</div>

CSS

		body,html {
            margin: 0;
        }
        
        li {
            list-style: none;
        }

        .teachers_intro {
            width: 100%;
        }

        .teachers_intro ul {
            padding: 0;
            box-sizing: border-box;
            margin: 0;
        }

        .teachers_intro ul li {
            width: 100%;
            height: 426px;
            position: relative;
        }

		/* 第一张图片 */
        .bg_img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            /** 实现置灰 */
            filter: grayscale(100%);
            object-fit: cover;
        }

		/* 第二张图片【主要处理下面这个盒子及盒子里img的样式】 */
        .border_img {
            position: absolute;
            left: 0;
            /* 下半部分是原色，所以是bottom: 0 */
            bottom: 0;
            width: 100%;
            /* 高度是一半【通过控制这个高度，可以实现原色占比的动态展示喔~】 */
            height: 50%;
            overflow: hidden;
        }

        .border_img img {
            width: 100%;
            /* 注意这儿的高度是原图片的高度喔 */
            height: 426px;
            object-fit: cover;
            position: absolute;
            left: 0;
            /* 下半部分是原色，所以是bottom: 0 */
            bottom: 0;
        }

二、图片实现：上半部分原色，下半部分灰色

1、实现效果

在这里插入图片描述

2、对应代码

HTML

<div class="teachers_intro">
    <ul>
        <li>
            <img class="bg_img" src="./img/test.png_720x720g.jpg" alt="">
            <div class="border_img">
                <img src="./img/test.png_720x720g.jpg" alt="">
            </div>
        </li>
    </ul>
</div>

CSS

		body,html {
            margin: 0;
        }
        
        li {
            list-style: none;
        }

        .teachers_intro {
            width: 100%;
        }

        .teachers_intro ul {
            padding: 0;
            box-sizing: border-box;
            margin: 0;
        }

        .teachers_intro ul li {
            width: 100%;
            height: 426px;
            position: relative;
        }

		/* 第一张图片 */
        .bg_img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            /** 实现置灰 */
            filter: grayscale(100%);
            object-fit: cover;
        }

		/* 第二张图片【主要处理下面这个盒子及盒子里img的样式】 */
        .border_img {
            position: absolute;
            left: 0;
            /* 上半部分是原色，所以是top: 0 */
            top: 0;
            width: 100%;
            /* 高度是一半【通过控制这个高度，可以实现原色占比的动态展示喔~】 */
            height: 50%;
            overflow: hidden;
        }

        .border_img img {
            width: 100%;
            /* 注意这儿的高度是原图片的高度喔 */
            height: 426px;
            object-fit: cover;
            position: absolute;
            left: 0;
            /* 上半部分是原色，所以是top: 0 */
            top: 0;
        }

三、图片实现：左边部分灰色，右边部分原色

1、实现效果

在这里插入图片描述

2、对应代码

HTML

<div class="teachers_intro">
    <ul>
        <li>
            <img class="bg_img" src="./img/test.png_720x720g.jpg" alt="">
            <div class="border_img">
                <img src="./img/test.png_720x720g.jpg" alt="">
            </div>
        </li>
    </ul>
</div>

CSS

		body,html {
            margin: 0;
        }
        
        li {
            list-style: none;
        }

        .teachers_intro {
            width: 100%;
        }

        .teachers_intro ul {
            padding: 0;
            box-sizing: border-box;
            margin: 0;
        }

        .teachers_intro ul li {
            width: 100%;
            height: 426px;
            position: relative;
        }

		/* 第一张图片 */
        .bg_img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            /** 实现置灰 */
            filter: grayscale(100%);
            object-fit: cover;
        }

		/* 第二张图片【主要处理下面这个盒子及盒子里img的样式】 */
        .border_img {
            position: absolute;
            /* 右半部分是原色，所以是right: 0 */
            right: 0;
            top: 0;
            /* 宽度是一半【通过控制这个宽度，可以实现原色占比的动态展示喔~】 */
            width: 50%;
            height: 100%;
            overflow: hidden;
        }

        .border_img img {
        	/* 注意这儿的宽度是原图片的宽度喔 */
            width: 375px;
            height: 426px;
            object-fit: cover;
            position: absolute;
            /* 右半部分是原色，所以是right: 0 */
            right: 0;
            top: 0;
        }

四、图片实现：左边部分原色，右边部分灰色

1、实现效果

在这里插入图片描述

2、对应代码

HTML

<div class="teachers_intro">
    <ul>
        <li>
            <img class="bg_img" src="./img/test.png_720x720g.jpg" alt="">
            <div class="border_img">
                <img src="./img/test.png_720x720g.jpg" alt="">
            </div>
        </li>
    </ul>
</div>

CSS

		body,html {
            margin: 0;
        }
        
        li {
            list-style: none;
        }

        .teachers_intro {
            width: 100%;
        }

        .teachers_intro ul {
            padding: 0;
            box-sizing: border-box;
            margin: 0;
        }

        .teachers_intro ul li {
            width: 100%;
            height: 426px;
            position: relative;
        }

		/* 第一张图片 */
        .bg_img {
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            /** 实现置灰 */
            filter: grayscale(100%);
            object-fit: cover;
        }

		/* 第二张图片【主要处理下面这个盒子及盒子里img的样式】 */
        .border_img {
            position: absolute;
            /* 左半部分是原色，所以是left: 0 */
            left: 0;
            top: 0;
            /* 宽度是一半【通过控制这个宽度，可以实现原色占比的动态展示喔~】 */
            width: 50%;
            height: 100%;
            overflow: hidden;
        }

        .border_img img {
        	/* 注意这儿的宽度是原图片的宽度喔 */
            width: 375px;
            height: 426px;
            object-fit: cover;
            position: absolute;
            /* 左半部分是原色，所以是left: 0 */
            left: 0;
            top: 0;
        }

在这里插入图片描述

小呀小萝卜儿

关注

7
点赞
踩
2

收藏

觉得还不错? 一键收藏
打赏
1
评论
2022-06-15 学习记录--CSS-图片实现：上半部分灰色，下半部分原色+上半部分原色，下半部分灰色+左边部分灰色，右边部分原色+左边部分原色，右边部分灰色

CSS-图片实现：上半部分灰色，下半部分原色+上半部分原色，下半部分灰色+左边部分灰色，右边部分原色+左边部分原色，右边部分灰色
复制链接

扫一扫