【Web前端HTML5&CSS3】13-背景
<blockquote><p>笔记来源：尚硅谷 Web 前端 HTML5&CSS3 初学者零基础入门全套完整版</p>
</blockquote>
<p></p><div class="toc"><div class="toc-container-header">目录</div><ul><li>背景<ul><li>1. PS 的基本设置</li><li>2. 背景</li><li>练习 1：线性渐变效果的背景图</li><li>练习 2：按钮点击效果</li></ul></li></ul></div><p></p>
<h1 id="背景">背景</h1>
<h2 id="1-ps-的基本设置">1. PS 的基本设置</h2>
<blockquote>
<p>工欲善其事，必先利其器</p>
</blockquote>
<p>在介绍背景之前，首先需要做好准备工作：安装 PS 与基本设置</p>
<p>这里就不详细介绍 PS 的安装了，因为网上一抓一大把，主要介绍 PS 的基本设置</p>
<p><strong>左侧工具栏</strong></p>
<p>调成 2 列，更方便使用</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/7d73fd6a596ea0e47e70748496a8bf40.png" alt="image-20210612131932089" loading="lazy"></p>
<p><strong>右侧工具栏</strong></p>
<p>不需要的视图统统关掉</p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/727d4922a4b6e4dd43795672ded474ea.png" alt="image-20210612132102709" loading="lazy"></p>
<p><strong>修改单位为像素</strong></p>
<p>由于一般默认的单位是厘米，所以这里需要修改</p>
<p>在历史记录、颜色或色板附近<code>右键</code>，打开选项卡，选择<code>界面选项</code></p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/bce39fddd0e9beb31e0653283a6a9bd0.png" alt="image-20210612132552271" loading="lazy"></p>
<p>打开<code>单位与标尺</code>，修改<code>单位</code>中的<code>标尺</code>与<code>文字</code>为<code>像素</code></p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/c112282537409ae4e3d29fe0a9c20c33.png" alt="image-20210612132904635" loading="lazy"></p>
<h2 id="2-背景">2. 背景</h2>
<ul>
<li><code>background-color</code> 设置背景颜色</li>
<li><code>background-image</code> 设置背景图片
<ul>
<li>如果背景图片大小小于元素，则背景图片会自动在元素中平铺将元素铺满</li>
<li>如果背景图片大小大于元素，则背景图片一部分会无法完全显示</li>
<li>如果背景图片大小等于元素，则背景图片会直接正常显示</li>
</ul>
</li>
<li><code>background-repeat</code> 设置背景图片的重复方式
<ul>
<li><code>repeat</code> 默认值，背景图片沿着 x 轴和 y 轴双方向重复</li>
<li><code>repeat-x</code> 背景图片沿着 x 轴方向重复</li>
<li><code>repeat-y</code> 背景图片沿着 y 轴方向重复</li>
<li><code>no-repeat</code> 背景图片不重复</li>
</ul>
</li>
<li><code>background-position</code> 设置背景图片的位置
<ul>
<li>通过<code>top</code> <code>left</code> <code>right</code> <code>bottom</code> <code>center</code>几个表示方位的词来设置背景图片的位置：使用方位词时必须要同时指定两个值，如果只写一个则第二个默认就是<code>center</code></li>
<li>通过偏移量来指定背景图片的位置：水平方向偏移量、垂直方向变量</li>
</ul>
</li>
<li><code>background-clip</code> 设置背景的范围
<ul>
<li><code>border-box</code> 默认值，背景会出现在边框的下边</li>
<li><code>padding-box</code> 背景不会出现在边框，只出现在内容区和内边距</li>
<li><code>content-box</code> 背景只会出现在内容区</li>
</ul>
</li>
<li><code>background-origin</code> 背景图片的偏移量计算的原点
<ul>
<li><code>border-box</code> 背景图片的变量从边框处开始计算</li>
<li><code>padding-box</code> 默认值，<code>background-position</code>从内边距处开始计算</li>
<li><code>content-box</code> 背景图片的偏移量从内容区处计算</li>
</ul>
</li>
<li><code>background-size</code> 设置背景图片的大小
<ul>
<li>第一个值表示宽度，第二个值表示高度；如果只写一个，则第二个值默认是<code>auto</code></li>
<li><code>cover</code> 图片的比例不变，将元素铺满</li>
<li><code>contain</code> 图片比例不变，将图片在元素中完整显示</li>
</ul>
</li>
<li><code>background-attachment</code> 背景图片是否跟随元素移动
<ul>
<li><code>scroll</code> 默认值，背景图片会跟随元素移动</li>
<li><code>fixed</code> 背景会固定在页面中，不会随元素移动</li>
</ul>
</li>
</ul>
<p>可以同时设置背景图片和背景颜色，这样背景颜色将会成为图片的背景色</p>
<p><strong>示例 1</strong></p>
<pre><code class="language-css">.box1 {
height: 500px;
width: 500px;
overflow: auto;
border: 20px red double;
padding: 10px;
/* 背景色 */
background-color: darksalmon;
/* 背景图 */
background-image: url("/assets/背景.png");
/* 背景图重复方式 */
background-repeat: no-repeat;
/* 背景图偏移位置 */
background-position: 0 0;
/* 背景图偏移量计算的原点 */
background-origin: content-box;
/* 背景范围 */
background-clip: content-box;
/* 背景图片大小 */
background-size: contain;
}
.box2 {
width: 100px;
height: 1000px;
background-color: orange;
background-image: url("assets/背景2.jpg");
background-repeat: no-repeat;
background-position: 50px 50px;
/* 背景图片是否跟随移动 */
background-attachment: fixed;
}
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/9f806f08854b47c21d02d5c23ed805a7.gif" alt="动画" loading="lazy"></p>
<p><code>backgound</code> 背景相关的简写属性，所有背景相关的样式都可以通过该样式来设置并且该样式没有顺序要求，也没有哪个属性是必须写的</p>
<p><strong>注意</strong></p>
<ul>
<li><code>background-size</code>必须写在<code>background-position</code>的后边，并且使用/隔开<code>background-position/background-size</code></li>
<li><code>background-origin background-clip</code> 两个样式，<code>orgin</code>要在<code>clip</code>的前边</li>
</ul>
<p><strong>示例 2</strong></p>
<pre><code class="language-css">.box1 {
height: 500px;
width: 500px;
border: 10px red double;
padding: 10px;
background: #bfa url("assets/dlam.png") no-repeat 100px 100px/200px
padding-box content-box;
}
</code></pre>
<p><img src="https://img-blog.csdnimg.cn/img_convert/e469a4b629a9d0a42bacbf69b4a88ca2.png" alt="image-20210612155539118" loading="lazy"></p>
<h2 id="练习-1线性渐变效果的背景图">练习 1：线性渐变效果的背景图</h2>
<p><img src="https://img-blog.csdnimg.cn/img_convert/12dbf45389452852cdb04ac7b87e5946.png" alt="image-20210612160713058" loading="lazy"></p>
<p>如果我们仔细挂那可能，会发现很多网站导航条的背景色并不是单一的某种颜色，而是有一个渐变的效果</p>
<p>不过到目前为止，我们还没有学习<code>线性渐变</code>的内容，不过凭上面所学的知识同样可以实现</p>
<p><strong>切图</strong></p>
<p>首先，我们需要通过 PS 软件进行<code>切图</code></p>
<ol>
<li>按住<code>Alt</code>同时滚动鼠标滑轮，可以对图片大小进行缩放；调整至合适大小，再选择<code>矩形块</code>工具，截取一个宽度为 1px 大小的图片</li>
</ol>
<p><img src="https://img-blog.csdnimg.cn/img_convert/9cf933089851d88ab149afbd2a09ffca.png" alt="image-20210612164205624" loading="lazy"></p>
<ol start="2">
<li>然后选择<code>图像</code>-<code>裁剪</code>，就可以得到一个我们需要的一个背景图片</li>
</ol>
<p><img src="https://img-blog.csdnimg.cn/img_convert/99c888010d9f623899d7c21059dd1f60.png" alt="image-20210612164423702" loading="lazy"></p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/ea1f3a686a6f538d0bd7b221952ec4a7.png" alt="image-20210612164544430" loading="lazy"></p>
<ol start="3">
<li>最后，选择<code>文件</code>-<code>存储为Web所用格式</code></li>
</ol>
<p><img src="https://img-blog.csdnimg.cn/img_convert/db062cd60f46f94d2829f9601866ae99.png" alt="image-20210612164611999" loading="lazy"></p>
<ol start="4">
<li>我这里选择的是 PNG 的格式，你可以对比几种格式，看看最终的图片大小折中选择，最好选择存储位置即可</li>
</ol>
<p><img src="https://img-blog.csdnimg.cn/img_convert/1e51da62eaaa95c55273289aba15decd.png" alt="image-20210612164704402" loading="lazy"></p>
<ol start="5">
<li>得到我们需要的背景图片之后，就可以引入到<code>css</code>样式中了</li>
</ol>
<p><strong>代码</strong></p>
<pre><code class="language-css">height: 60px;
width: 1500px;
background: url("assets/背景3.png") repeat-x;
</code></pre>
<p><strong>效果</strong></p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/eb584be8969046de24bbf44e29a30a22.png" alt="image-20210612163950079" loading="lazy"></p>
<h2 id="练习-2按钮点击效果">练习 2：按钮点击效果</h2>
<p><strong>代码</strong></p>
<pre><code class="language-html"><style>
a:link {
/* 因为本身是行内元素，变成块元素更方便设置宽高 */
display: block;
width: 93px;
height: 29px;
background: url("assets/背景/练习2-背景/link.png");
}
a:hover {
background: url("assets/背景/练习2-背景/hover.png");
}
a:active {
background: url("assets/背景/练习2-背景/active.png");
}
</style>
<a href="javascript:;"></a>
</code></pre>
<p><strong>效果</strong></p>
<p><img src="https://img-blog.csdnimg.cn/img_convert/2f9fc038af13642f79b96a76a02b710f.gif" alt="动画" loading="lazy"></p><br><br>
来源：https://www.cnblogs.com/vectorx/p/14878901.html
頁:
[1]