css将图片固定在头部 |css3 html5 导航

/* CSS样式 */
#header {
background-image: url("header.jpg");
background-position: center;
background-repeat: no-repeat;
position: fixed;
top: 0;
left: 0;
right: 0;
height: 100px;
}
/* HTML */
<header id="header"></header>

使用CSS将图片固定在头部的方法很简单，只需要设置一个带有背景图像的元素，并将其固定在页面的顶部即可。在上面的代码中，大家使用了一个ID为“header”的元素来设置头部。大家将背景图像设置为“header.jpg”，并使用“background-position”属性将其居中。大家还设置了“background-repeat”属性，将背景图像设置为不重复。

在接下来的代码中，大家使用“position: fixed”属性将元素固定在页面的顶部。大家还设置了“top: 0”和“right: 0”属性，将元素放置在页面的顶部和右侧。最后，大家使用“height”属性将元素的高度设置为100像素，以确保其不会超出页面顶部。

使用CSS将图片固定在头部是一种简单而有效的方法，可以使网页更加美观且易于使用。通过对CSS样式的灵活运用，大家可以轻松地实现这一目标。