CSS背景相关的属性包括：

1. background-color: 设置元素的背景颜色。
2. background-image: 设置元素的背景图像。
3. background-repeat: 设置背景图像是否及如何重复。
4. background-position: 设置背景图像的位置。
5. background-size: 设置背景图像的大小。
6. background-clip: 设置背景的绘制区域。
7. background-origin: 设置背景图片的定位区域。
8. background-attachment: 设置背景图像是否固定或与页面滚动。
9. background: 简写属性，用于设置上述所有背景属性。

示例代码：

/* 设置背景颜色为灰色 */
.element {
  background-color: #808080;
}
 
/* 设置背景图片，不重复，位置在左上角 */
.element {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-position: left top;
}
 
/* 设置背景图片，覆盖整个元素，不重复，居中 */
.element {
  background-image: url('image.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
}
 
/* 简写形式，设置多个背景值 */
.element {
  background: #808080 url('image.jpg') no-repeat center center;
}
 
/* 设置背景大小，居中，不溢出 */
.element {
  background-size: contain;
  background-position: center;
  background-origin: content-box;
}

简写形式的 background 属性可以包含多个背景值，按照以下顺序：

1. background-color
2. background-image
3. background-repeat
4. background-attachment
5. background-position

简写时，这些值之间用空格隔开，省略某个值则用关键字 initial、inherit 或 unset 代替。

要在CSS中使按钮居右，可以使用flexbox或者float属性。以下是两种方法的示例代码：

使用flexbox居右：

.container {
  display: flex;
  justify-content: flex-end; /* 子元素向右对齐 */
}
 
.button {
  /* 按钮样式 */
}

<div class="container">
  <button class="button">按钮</button>
</div>

使用float居右：

.button-container {
  width: 100%; /* 确保容器充满宽度 */
  text-align: right; /* 内部文本右对齐 */
}
 
.button {
  float: right; /* 按钮浮动到右侧 */
  /* 按钮样式 */
}

<div class="button-container">
  <button class="button">按钮</button>
</div>

在这两种方法中，选择最适合您布局和设计需求的一种。如果您正在使用现代布局技术，推荐使用flexbox。

要在CSS中设置文本显示高度并隐藏超出的部分，可以使用以下属性：

1. overflow: 设置如何处理超出容器的内容。
2. white-space: 设置如何处理元素内的空白。
3. text-overflow: 设置如何显示被截断的文本。
4. height: 设置容器的高度。

以下是一个简单的例子，演示如何使用这些属性：

.text-container {
  height: 50px; /* 设置容器高度 */
  overflow: hidden; /* 隐藏超出部分 */
  white-space: nowrap; /* 不换行 */
  text-overflow: ellipsis; /* 超出部分显示为省略号 */
}

<div class="text-container">
  这是一段很长的文本，但是我们只想显示在容器内部的一部分，超出的部分会被隐藏并显示为省略号。
</div>

在这个例子中，.text-container 类应用于一个 div 元素，该元素包含一段文本。这段文本的显示高度被设置为50像素，任何超出这个高度的文本都会被隐藏，并且超出部分的文本会以省略号的形式表示。

/* 引入Animate.css库 */
@import url("https://cdn.jsdelivr.net/npm/animate.css@3.5.2/animate.min.css");
 
/* 使用Animate.css中的动画类 */
.my-element {
    display: inline-block;
    /* 应用bounce动画，持续时间为1.5秒 */
    animation: bounce 1.5s infinite;
}
 
/* 如果需要覆盖某个动画的某个特定帧，可以使用keyframes */
@keyframes myCustomAnimation {
    0% {
        /* 动画开始时的状态 */
        opacity: 0;
        transform: translateX(-100px);
    }
    50% {
        /* 动画中间时刻的状态 */
        opacity: 1;
        transform: translateX(0);
    }
    100% {
        /* 动画结束时的状态 */
        opacity: 0;
        transform: translateX(100px);
    }
}
 
/* 应用自定义动画 */
.my-custom-element {
    animation: myCustomAnimation 3s infinite;
}

这个示例展示了如何在CSS中引入Animate.css库，并且如何在自己的CSS样式中使用库中预定义的动画效果。同时，演示了如何创建自定义的关键帧动画并将其应用到元素上。这有助于开发者快速为他们的网站或应用添加生动的动画效果。

/* 设置背景图片，并设置其大小，位置和是否重复 */
.background-image {
  background-image: url('image.jpg');
  background-size: cover; /* 背景图片覆盖整个容器 */
  background-position: center; /* 背景图片居中 */
  background-repeat: no-repeat; /* 背景图片不重复 */
}
 
/* 使用多个背景图片 */
.multiple-backgrounds {
  background-image: url('first-image.jpg'), url('second-image.jpg');
  background-position: left, right;
  background-repeat: no-repeat, no-repeat;
}
 
/* 设置背景图片的透明度 */
.background-opacity {
  background-image: url('image.jpg');
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  opacity: 0.5; /* 整个容器的透明度为50%，包括背景图片 */
}
 
/* 使用渐变背景 */
.gradient-background {
  background: linear-gradient(to right, red, yellow);
}

这个代码示例展示了如何在CSS中设置背景图片、多个背景图片、背景图片透明度以及如何使用渐变背景。这些是CSS背景样式的基本应用，对于初学者来说具有很好的教育价值。

在JavaScript中，DOM（Document Object Model）基本操作包括查询、创建、插入、删除和修改DOM元素。以下是一些基本操作的示例代码：

1. 查询元素：

var element = document.getElementById('elementId'); // 通过ID查询元素
var elements = document.getElementsByClassName('className'); // 通过类名查询元素
var elements = document.getElementsByTagName('tagName'); // 通过标签名查询元素

2. 创建元素：

var newElement = document.createElement('div'); // 创建一个新的div元素
newElement.innerHTML = 'Hello, World!'; // 设置元素内容

3. 插入元素：

var parentElement = document.getElementById('parentElementId');
parentElement.appendChild(newElement); // 将新元素添加到父元素的末尾

4. 删除元素：

var elementToRemove = document.getElementById('elementToRemove');
elementToRemove.parentNode.removeChild(elementToRemove); // 删除指定元素

5. 修改元素：

var elementToChange = document.getElementById('elementToChange');
elementToChange.innerHTML = 'New content'; // 修改元素内容
elementToChange.setAttribute('attributeName', 'newValue'); // 修改元素属性

这些是DOM操作的基础，可以根据需要进行更复杂的操作，例如处理事件、CSS样式等。

"CSS - 扫盲" 这个表述不清楚，我猜你可能是在询问如何使用CSS来增强网站对于视觉障碍者的访问。

一种常见的方法是使用CSS来提高图片和颜色对比度，以便视力障碍者（例如那些由于视力问题而需要使用屏幕阅读器的人）能更容易地理解网页内容。

以下是一些CSS技巧，用于改善网站的无障碍性：

1. 高对比度的文本背景：

.contrast-text {
    color: #000; /* 黑色文字 */
    background-color: #fff; /* 白色背景 */
}

2. 增加链接和按钮的可见性：

.increase-visibility {
    color: #000; /* 黑色文本 */
    background-color: #fff; /* 白色背景 */
    border: 1px solid #000; /* 黑色边框 */
}

3. 为图片添加ALT标签和描述性的title属性：

<img src="image.jpg" alt="描述性文本" title="详细描述文本">

4. 使用屏幕阅读器友好的结构：

<h1>标题</h1>
<nav>
    <ul>
        <li><a href="#">链接</a></li>
        ...
    </ul>
</nav>
<main>
    <article>
        <header>
            <h2>文章标题</h2>
        </header>
        <section>
            <h3>段落标题</h3>
            <p>段落内容...</p>
        </section>
    </article>
</main>

5. 使用CSS过渡和动画增加无障碍性：

.animate-this {
    transition: background-color 0.5s ease;
}

以上只是无障碍性网站设计的一部分，实际上还有很多其他的最佳实践和方法。在设计网站时，应当考虑到所有用户，包括那些有视觉障碍的用户。

CSS的transition属性可以用来定义元素的过渡效果，使得当元素的CSS属性改变时，这个改变可以用一个平滑的动画效果进行。

基本语法如下：

transition: property duration timing-function delay;

• property：定义过渡效果的CSS属性名，比如width、background-color、opacity等。如果想要所有属性都有过渡效果，可以使用all关键字。
• duration：定义过渡效果的持续时间，单位通常是秒(s)或毫秒(ms)。
• timing-function：定义过渡的时序函数，比如linear、ease、ease-in、ease-out、ease-in-out、cubic-bezier。
• delay：定义过渡效果开始前的延迟时间。

例子：

div {
  transition: background-color 1s ease-in-out 0.5s;
}
 
div:hover {
  background-color: yellow;
}

在这个例子中，当鼠标悬停在div上时，背景色会在0.5秒后以ease-in-out时序函数在1秒内渐变到黄色。

以下是一个简单的HTML和CSS代码示例，演示了如何使用CSS3实现实时时间数字滚动效果：

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>实时时间滚动效果</title>
<style>
  @keyframes scroll {
    0% {
      transform: translateX(100%);
    }
    100% {
      transform: translateX(-100%);
    }
  }
 
  .time-container {
    overflow: hidden;
    white-space: nowrap;
    background: #f2f2f2;
    padding: 10px;
    border-radius: 5px;
  }
 
  .time-display {
    display: inline-block;
    font-size: 3em;
    animation: scroll 5s linear infinite;
  }
</style>
</head>
<body onload="startClock()">
 
<div class="time-container">
  <div id="time-element" class="time-display"></div>
</div>
 
<script>
function startClock() {
  const timeElement = document.getElementById('time-element');
  const updateTime = () => {
    const now = new Date();
    timeElement.textContent = now.toLocaleTimeString('it-IT');
  };
 
  updateTime(); // Initialize the time display
  setInterval(updateTime, 1000); // Update the time every second
}
</script>
 
</body>
</html>

这段代码实现了一个简单的数字时钟，其中时间数字通过CSS动画在屏幕上滚动。@keyframes scroll定义了数字从屏幕右侧进入到左侧的滚动动画。.time-display类使用这个动画，并且通过JavaScript每秒更新内容以显示当前时间。

100vh和100vm单位分别代表了视口高度（Viewport Height）和视口宽度（Viewport Width）的100个单位。如果给body元素设置了这些值，并且出现了滚动条，那么可能的原因是body的内容超过了视口的高度或宽度。

解决方法：

1. 确保内容不会超过视口的尺寸。如果内容超出了视口大小，那么浏览器会自动添加滚动条。
2. 如果确实需要设置body的高度为视口高度，并且希望内容不会超出，可以设置body的margin和padding为0，移除默认的边距和填充，并确保没有其他全局样式影响body的高度计算。

body {
  margin: 0;
  padding: 0;
  height: 100vh; /* 设置body高度为视口高度 */
  overflow: hidden; /* 如果不希望出现滚动条，可以设置为hidden */
}

3. 如果你的目的是让body的高度至少为视口的100%，但允许超过，可以使用min-height属性：

body {
  margin: 0;
  padding: 0;
  min-height: 100vh; /* 设置body最小高度为视口高度 */
}

4. 如果你的内容确实需要滚动，并且希望隐藏某个特定元素的滚动条（例如，一个内容可能超长的div），可以为该元素设置overflow: hidden;：

.content {
  height: 200vh; /* 假设内容区域超过视口高度 */
  overflow: auto; /* 添加滚动条 */
}
 
.no-scroll {
  overflow: hidden; /* 隐藏滚动条 */
}

确保在实际的布局中测试这些解决方案，以确保它们不会影响到你的网页内容显示。