CSS样式基础
CSS背景属性
重要程度：5 分
<h2>CSS背景属性重点内容</h2>
<ul>
<li><strong>background-color</strong>: 设置元素的背景颜色。<br>
例如: <code>background-color: #ff0000;</code> (红色背景)</li>
<li><strong>background-image</strong>: 设置元素的背景图像。<br>
例如: <code>background-image: url('image.jpg');</code> (使用图像作为背景)</li>
<li><strong>background-repeat</strong>: 控制背景图像是否重复以及如何重复。<br>
例如: <code>background-repeat: no-repeat;</code> (不重复)</li>
<li><strong>background-position</strong>: 设置背景图像的位置。<br>
例如: <code>background-position: center top;</code> (图像在顶部居中)</li>
<li><strong>background-attachment</strong>: 设置背景图像是否固定或随页面滚动。<br>
例如: <code>background-attachment: fixed;</code> (背景固定)</li>
<li><strong>background-size</strong>: 设置背景图像的大小。<br>
例如: <code>background-size: cover;</code> (图像覆盖整个元素)</li>
</ul>
<h3>例题说明</h3>
<p>假设有一个div元素，我们希望设置其背景为浅蓝色，并在右下角显示一张名为 'logo.png' 的图片，且图片不重复。</p>
<pre>
<code>
div {
background-color: #add8e6;
background-image: url('logo.png');
background-repeat: no-repeat;
background-position: right bottom;
}
</code>
</pre>
<p>这样设置后，div元素将具有浅蓝色背景，并在其右下角显示一张名为 'logo.png' 的图片，且图片不会重复。</p>