阿卡不拉

Appearance

更多 CSS 样式 👌 ​

1. 透明度 ​

在 CSS 中，有两种主要的方式来控制元素的透明度。

1.1. opacity 属性 ​

  • opacity：设置整个元素的透明度，包括其内容和边框。
  • 取值：从 0.0 (完全透明) 到 1.0 (完全不透明)。
  • 注意：opacity 会被子元素继承。如果父元素设置了透明度，子元素的最不透明度只能达到父元素的水平。
html
<!-- opacity 示例 -->
<div class="opacity-box">
  <p>这段文字和它的容器都是半透明的。</p>
</div>
css
.opacity-box {
  background-color: #ff6b6b;
  color: white;
  padding: 20px;
  opacity: 0.6; /* 整个元素（背景+文字）变为60%不透明 */
}

1.2. rgba 颜色值 ​

  • rgba()：在设置颜色时，通过 Alpha 通道来指定该颜色的透明度。
  • 格式：rgba(red, green, blue, alpha)，其中 alpha 的取值范围是 0.0 到 1.0。
  • 优势：只影响当前设置的颜色（如 background-color 或 color），而不会影响元素内的其他内容。
html
<!-- rgba 示例 -->
<div class="rgba-box">
  <p>这段文字是完全不透明的，但它的容器背景是半透明的。</p>
</div>
css
.rgba-box {
  background-color: rgba(78, 205, 196, 0.5); /* 背景色为50%透明，文字不受影响 */
  color: #333;
  padding: 20px;
}

2. 鼠标样式 ​

  • cursor 属性用于定义当鼠标指针悬停在元素上时显示的图标样式。
值描述
default默认指针 (通常是箭头)
pointer手型，表示链接或可点击的按钮
textI 型，表示可选中的文本
move十字箭头，表示可移动的元素
not-allowed禁止图标，表示操作不被允许
help带问号的指针，表示可提供帮助信息
wait等待/沙漏图标，表示程序正忙
crosshair十字线，常用于位图选择
html
<!-- cursor 示例 -->
<button class="cursor-pointer">点击我 (pointer)</button>
<p class="cursor-text">选我 (text)</p>
<div class="cursor-not-allowed">别点我 (not-allowed)</div>
css
.cursor-pointer {
  cursor: pointer;
}
.cursor-text {
  cursor: text;
}
.cursor-not-allowed {
  cursor: not-allowed;
}

3. 元素可见性 ​

有两种常用的方法来隐藏元素，它们的效果有本质区别。

3.1. display: none ​

  • 效果：元素将不会在页面上被渲染，浏览器会认为它不存在。
  • 特点：
    • 不生成盒子，元素彻底从文档流中移除。
    • 不占据任何空间，如同被删除一样。
    • 元素上的事件（如 click）不会触发。

3.2. visibility: hidden ​

  • 效果：元素在视觉上被隐藏，但其占用的空间仍然保留。
  • 特点：
    • 生成盒子，但盒子是不可见的。
    • 元素仍然占据它在常规流中的位置，只是内容不可见。
    • 子元素可以通过设置 visibility: visible 来重新显示。

:::important display: none vs visibility: hidden

  • 布局影响：display: none 会引发页面重排 (reflow)，而 visibility: hidden 只会引发重绘 (repaint)。
  • 空间占用：display: none 不占空间，visibility: hidden 占据空间。
  • 性能：如果频繁切换显示/隐藏，visibility: hidden 的性能通常优于 display: none。 :::
html
<!-- 元素可见性示例 -->
<div class="visibility-demo">
  <div class="box display-none">display: none</div>
  <div class="box">我还在</div>
  <div class="box visibility-hidden">visibility: hidden</div>
  <div class="box">我也在</div>
</div>
css
.box {
  width: 100px;
  height: 50px;
  background: #f0ad4e;
  margin: 5px;
  text-align: center;
  line-height: 50px;
}
.display-none {
  display: none;
}
.visibility-hidden {
  visibility: hidden;
}

4. 背景图 ​

背景图是 CSS 中用于美化页面的重要工具。

4.1. <img> 标签 vs 背景图 ​

  • <img> 标签：属于 HTML 结构的一部分，用于展示作为网页核心内容的图片（如图表、产品图）。它具有语义，对 SEO 更友好。
  • 背景图：属于 CSS 样式，用于装饰性或非核心的图片（如背景纹理、图标）。

4.2. 背景相关属性 ​

background-image ​

  • 作用：为一个元素设置一个或多个背景图像。
  • 值：url('path/to/image.jpg')

background-repeat ​

  • 作用：设置背景图像是否以及如何重复。
  • 值：repeat (默认), no-repeat, repeat-x, repeat-y。

background-size ​

  • 作用：设置背景图像的尺寸。
  • 值：
    • auto：默认值，图像原始大小。
    • cover：缩放图像以完全覆盖背景区，可能裁剪图像。
    • contain：缩放图像以完整地展示在背景区内，可能留有空白。
    • <length> 或 <percentage>：如 100px 50%。

background-position ​

  • 作用：设置背景图像的起始位置。
  • 值：关键字 (top, center, bottom, left, right) 或数值/百分比。
  • 雪碧图 (Sprite)：通过精确设置 background-position，可以从一张大图中“裁剪”出需要的小图标，以减少 HTTP 请求。

background-attachment ​

  • 作用：设置背景图像是随元素滚动，还是固定在视口上。
  • 值：scroll (默认), fixed, local。

4.3. 简写属性 background ​

为了方便，可以使用 background 属性一次性设置所有背景相关的样式。

顺序：background-color background-image background-repeat background-attachment background-position / background-size

css
/* 背景图简写示例 */
.background-demo {
  height: 200px;
  border: 1px solid #ccc;
  background: #f0f0f0 url("path/to/icon.png") no-repeat fixed center / 50px 50px;
}