CSS：图片样式设置

本文将记录Vue开发中，应用到的CSS样式案例代码和解释。

---

---

一、示例1

.main-top {
  position: absolute;
  top: 1vh;
  width: 100vw;
  height: 10vh;
  background: url('../assets/home_top_bg.png');
  background-size: 100% 100%;
  z-index: 9999;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

1.1 代码解释

让我们逐条解释以上代码的含义和效果：

1. .main-top: 这是一个CSS类选择器，它选择所有具有class="main-top"的HTML元素。

2. position: absolute;: 这个样式规则将元素的定位方式设置为绝对定位。绝对定位的元素相对于其最近的已定位祖先元素进行定位。

3. top: 1vh;: 这个样式规则设置元素相对于其定位父元素顶部的距离为1视窗高度（viewport height，即视窗高度的1%）。

4. width: 100vw;: 这个样式规则设置元素的宽度为100视窗宽度（viewport width，即视窗宽度的100%）。

5. height: 10vh;: 这个样式规则设置元素的高度为10视窗高度（viewport height，即视窗高度的10%）。

6. background: url(‘…/assets/home_top_bg.png’);: 这个样式规则设置元素的背景图片为…/assets/home_top_bg.png。

7. background-size: 100% 100%;: 这个样式规则设置背景图片的尺寸适应元素的宽度和高度，即填满整个元素。

8. z-index: 9999;: 这个样式规则设置元素的层级，值为9999，用于控制元素在层叠顺序中的显示。

9. -webkit-user-select: none;: 这个样式规则设置在WebKit浏览器中，禁止用户选择（鼠标选中）元素的内容。

10. -ms-user-select: none;: 这个样式规则设置在Microsoft Edge浏览器中，禁止用户选择元素的内容。

11. user-select: none;: 这个样式规则设置在其他浏览器中，禁止用户选择元素的内容。

效果：

以上代码是用于设置一个具有特定样式的元素，该元素的class属性为main-top。这个元素将以绝对定位方式显示在页面的顶部，距离顶部1vh，宽度占据整个视窗宽度，高度为10vh。元素的背景图片为…/assets/home_top_bg.png，并且该图片将会等比例缩放以填充整个元素的背景。元素的层级为9999，确保它在其他元素上方显示。另外，该元素的内容不可被用户选中。

请注意，上述代码中使用的vh和vw单位是相对于视窗的高度和宽度的百分比单位，用于创建响应式设计。图片路径…/assets/home_top_bg.png应该根据实际项目目录结构进行调整，确保能正确加载背景图片。

1.2 vh和vw单位的含义

vh和vw是CSS中的视窗单位，用于表示视窗（浏览器窗口）的高度和宽度的百分比。

• vh： 1vh等于视窗高度的1%。 例如，如果视窗高度为1000px，那么1vh就等于10px（1000px * 1% = 10px）。

• vw： 1vw等于视窗宽度的1%。 例如，如果视窗宽度为800px，那么1vw就等于8px（800px * 1% = 8px）。

这些视窗单位通常用于实现响应式布局和元素尺寸的相对调整，使得元素在不同设备或不同视窗大小下能够适应屏幕。使用视窗单位可以让页面元素相对于视窗尺寸进行自适应，从而提供更好的用户体验。

请注意，视窗单位并不支持所有浏览器，特别是一些较旧的浏览器版本。在使用视窗单位时，最好进行兼容性测试以确保在目标浏览器中正常工作。