Menu
CoddyTech
开始学习

模糊的主视觉图

本课属于 Coddy HTML 学习旅程的“精通 CSS”单元。第 43 课，共 43 课。

challenge icon

挑战

简单

在 .gallery 单元中有一张纽约市的图片。
你的任务是使用 CSS 为它应用模糊滤镜，值为 2px。

亲手试试

<html>
<head>
  <title>Blurred Hero Image</title>
  <style> 
    /* Add your CSS styles here: */
    img {
    width: 100%;
    }
  </style>
</head>
<body>
    <div class="gallery">
        <img src="https://upload.wikimedia.org/wikipedia/commons/0/05/View_of_Empire_State_Building_from_Rockefeller_Center_New_York_City_dllu.jpg
">
    </div>
</body>
</html>

精通 CSS中的所有课

1精通选择器：组合选择器

简介后代选择器子选择器相邻兄弟选择器通用兄弟选择器复习挑战

4下拉菜单项目

添加子菜单显示子菜单更多样式输入框和按钮

7使用 CSS Grid 构建

网格基础使用 grid-row 放置项目命名区域复习挑战

2交互式伪类

伪类悬停效果焦点效果激活样式复习挑战

5视觉效果

渐变CSS 滤镜变换过渡与悬停效果复习挑战

8风味盛宴网站

设置网格布局页眉主体部分页脚

3结构伪类

结构伪类选择第一个子元素选择最后一个子元素模式的力量：使用 nth-child复习挑战

6落地页

设置页眉区域样式设置按钮样式区域布局卡片布局完善细节

9最终挑战

高亮显示当前菜单项表格斑马纹行按钮悬停效果网格卡片布局模糊的主视觉图

自己练习： Web 在线编辑器