切换背景图像综合练习题，十天精通CSS3教程-慕课网

切换背景图像综合练习题

同学们，根据所学知识，使用CSS3知识，实现背景图片的切换效果（不依赖js，点击小图切换大的背景图）

任务

给每个列表定义不同的背景颜色

提示：使用结构伪类选择器:nth-of-type()

设置缩略图外形效果

提示：使用伪元素::after制作圆形效果

1、给每个缩略图设置不同的图片

提示：使用伪结构选择器:nth-of-type()，并且配合::after

2、给每个缩略图添加透明度蒙板效果

提示：使用伪类选择器::before给缩略图添加蒙板效果

3、鼠标悬浮在缩略图上时，修改缩略图上蒙板的透明度

提示：通过:hover和::before配合修改opacity的值为0

4、点击缩略图，切换背景图片

提示：通过目标选择器:target进行背景图片的切换

5、控制不是被点击图片的层级大小，让其不显示

提示：通过“否定选择器:not()”和“目标选择器:target”来控制不是被切换的背景图像不显示

?不会了怎么办

问答
评论
笔记
资料下载
代码

全部精华我要发布

最底下的图一直都是第五张图吗？

最新回答 / 李_十一

为什么我的图片不出来

1 回答 673 浏览

2022-04-20

动画还是不够流畅，感觉有所卡顿。

最新回答 / 星栎

???????????????<...code...>

1 回答 619 浏览

2022-04-20

class="bg slideLeft"使用的时候是.slideLeft而不是.bg sildeLeft呢？

已采纳回答 / 从前慢_5

class="bg slideLeft"class="bg slideLeft" 这是给元素添加了两个class，多个class用空格隔开；.bg sildeLeft：bg是父元素的class， sildeLeft是子元素的class

1 回答 1369 浏览

2020-04-03

7-8任务2

最新回答 / CocoIloveu

：after是css2用到的，为了将伪元素和伪类区分开，css3开始用::after这种形式的

3 回答 991 浏览

2020-11-10

图片全没了?

最新回答 / AImeng

这个URL的意思是, 图片和你的项目放在一起的.需要在你的项目路径下有这张图片.如果部署了项目, 应该把图片放到URL对应的路径下.

1 回答 944 浏览

2019-12-28

这些题对我而言太难了，我应该从哪学起呢

最新回答 / 慕神1486313

bilibili.com找视频学

1 回答 997 浏览

2019-11-05

你们要的顺滑过渡动画，很多人觉得动画过渡的很生硬，这里我修改了一下动画部分，也替换了图片资源解决了资源not found的问题，请参考使用吧

最赞回答 / 慕数据7136769

<...code...>

2 回答 2054 浏览

2019-09-05

如何让缩略图可以比较清晰

最赞回答 / ly今夕何夕

在每张背景图片下面加个 background-size:cover;  代码 就好了,它的作用是让图片自动根据容具的大小来填充；

/*任务三、设置缩略图背景图像*/
.clearfix li:nth-of-type(1) a::after{
   background: url(http://localhost:8080/images/timg.jpg) no-repeat center;
   background-size: cover;
}

2 回答 1595 浏览

2020-03-13