前端CSS基础7（背景相关属性，鼠标相关属性）

CSS背景相关属性

在 CSS 中，可以使用多种属性来设置元素的背景样式。以下是一些常用的 CSS 背景相关属性：

• background-color：用于设置元素的背景颜色。

.example {
    background-color: #f0f0f0;
}

• background-image：用于设置元素的背景图片。

.example {
    background-image: url('background.jpg');
}

• background-repeat：指定背景图片如何重复显示。

repeat：在水平和垂直方向上平铺（默认值）。
repeat-x：仅在水平方向上平铺。
repeat-y：仅在垂直方向上平铺。
no-repeat：不重复，只显示一次。

.example {
    background-image: url('background.jpg');
    background-repeat: repeat;
}

• background-size：控制背景图片的大小。

cover：尽可能填充整个容器并保持比例，可能剪裁图像。
contain：尽可能显示整个图像并保持比例，可能留有空白。

.example {
    background-image: url('background.jpg');
    background-size: cover;
}

• background-position：设置背景图片的起始位置。

.example {
    background-image: url('background.jpg');
    background-position: center;
}
.example {
    background-image: url('background.jpg');
        <!-- 背景的起始点-->
    background-position: 70px 120px;}

• background-attachment：指定背景图片是否随着页面内容滚动。

scroll：背景图片会随页面一起滚动（默认值）。
fixed：背景图片固定在视口中，页面内容滚动时不会移动。

.example {
    background-image: url('background.jpg');
    background-attachment: fixed;
}

background：复合属性

div {
    font-size: 50px;
    height: 100px;
    width: 100px;
    border: 5px black solid;
    background-color: blueviolet;
    background-image: url(../HTML-study/欧买噶.jpg);
    background-repeat: no-repeat;
    background-position:center;
    background-size:cover;
    background-attachment:scroll;
}
div{
    font-size: 50px;
    height: 100px;
    width: 100px;
    border: 5px black solid;
    background: black url(../HTML-study/欧买噶.jpg) no-repeat center;
}

以上两段代码意思一样，注意background的几个可取值没有顺序要求。

CSS鼠标相关属性

在 CSS 中，有一些属性可以用来控制鼠标悬停在元素上时的样式和行为。以下是一些常用的 CSS 鼠标相关属性：

• cursor：指定鼠标指针的样式。

auto：浏览器自动选择合适的光标。
pointer：小手指形状，表示链接可点击。
move：移动图标
text：文字选择器
wait：等待
crosshair：十字线形状。
default：默认箭头光标。

div {
    cursor: pointer;
}

• :hover 伪类：用于设置鼠标悬停时的样式。

div:hover {
background-color: lightblue;
}

• pointer-events：指定元素是否响应鼠标事件。

auto：元素正常响应鼠标事件（默认值）。
none：元素不响应鼠标事件，事件穿透到下面的元素。
css
h1 {
pointer-events: none;
}