使用 CSS 的可拉伸背景图像

当前位置：主页 > 学无止境 > WEB前端 > CSS >

Vue React JavaScript Angular CSS HTML

使用 CSS 的可拉伸背景图像

作者：迹忆客最近更新：2023/04/27 浏览次数：

这篇简短的文章是关于使用 CSS 来设计 HTML 页面的样式，着重于设计任何 HTML 元素的背景图像。

网页上的 CSS 样式

有多种方法可以在您的网页上使用 CSS：

内联 CSS：内联 CSS 意味着您将 style 属性与任何 HTML 元素一起使用，并将任何样式属性专门应用于该元素。
内部 CSS：如果您想将样式应用于网站的单个页面，则使用内部 CSS。因此，在包含在 <style> 元素中的页面上编写样式属性。
外部 CSS：外部 CSS 是用于将样式应用于所有网站页面的 CSS 类型。因此，您创建了一个样式表，其中包含不同类型的选择器和样式属性，并将该样式表包含在您网站的所有网页上。

有多个 CSS 属性可以应用不同类型的样式。对于本文，我们将重点关注用于设置任何元素的背景图像大小的属性 background-size。

CSS background-size 属性

当我们应用任何背景（例如图像）并且您需要在该元素中设置该背景图像的大小或位置时，将使用此 CSS 属性。有四种设置背景大小的方法。

使用关键字设置大小。关键字是 auto、cover 和 contain。
使用单值语法，您只指定宽度，高度设置为自动。
使用双值语法，您可以在其中给出宽度和高度值。
对背景大小使用多个值。

background-size 属性的语法。

background-size: auto|contain|cover|initial|inherit|percentage|length

关键字	定义
auto	这是背景图像以其原始大小显示的默认值。
contain	在这个值中，背景图像被调整大小以在元素中完全可见。
cover	在此值中，背景图像会调整大小以通过拉伸或切割其边缘来填充元素容器。
initial	设置默认值。
inherit	它继承了 DOM 中其父元素的大小。
percentage	您使用某个百分比值指定大小。
length	这是设置值的单位，比如px。如果指定了一个，则其他设置为自动。

我们将在下面的示例中使用上面讨论的一些值。

在下面的示例中，我们创建了一个包含段落的 div 元素。我们将背景图像应用于 div 元素，然后设置其不同的大小以获得所有值的演示。

代码 - HTML:

<body>
    <h2>background-size: 72% 52%:</h2>
    <div id="container1">
        <p>This div has a background-size of 72% and 52%.</p>
        <br/><br/>
    </div>
    <h2>background-size: 100% 100%:</h2>
    <div id="container2">
        <p>This div has a background-size of 100% and 100%.</p>
        <br/><br/>
    </div>
</body>

代码 - CSS:

#container1 {
    background: url(/img/DelftStack/logo.png);
    background-size: 72% 52%;
    background-repeat: no-repeat;
}
#container2 {
    background: url(/img/DelftStack/logo.png);
    background-size: 100% 100%;
    background-repeat: no-repeat;
}

在这个 CSS 中，我们创建了两个不同的 id-selector 并为它们应用了不同的属性。在 container1 中，我们将背景图像设置为覆盖 72% 的宽度和 52% 的高度。

而在 container2 中，我们设置了背景图像的 100% 宽度和 100% 高度。

在下一个示例中，我们将使用背景大小的覆盖值。 HTML 页面上只有一个 div 容器就足够了。

代码 - CSS:

#container1 {
    background: url(/img/DelftStack/logo.png);
    background-size: cover;
    background-repeat: no-repeat;
}

代码 - HTML:

<body>
    <h2>background-size: 72% 52%:</h2>
    <div id="container1">
        <p>This div has a background-size of 72% and 52%.</p><br/><br/>
    </div>
</body>

我们可以看到背景图像被覆盖以填充整个 div 元素。

我们将在下一个示例中使用属性值作为 contain 来查看其结果。

代码 - CSS:

#container1 {
    background: url(/img/DelftStack/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
}

请注意 ，背景图像在 div 元素中是完全可见的，并且不会被拉伸以覆盖整个元素。

因此，我们可以看到如何设置背景大小属性，并根据我们的需要和要求使图像可拉伸或可见。请记住，这些属性可以应用于任何 HTML 元素，就像 div 元素一样。

上一篇：CSS 中的渐变背景

下一篇：使用 CSS 创建背景图像渐变

转载请发邮件至 1244347461@qq.com 进行申请，经作者同意之后，转载请以链接形式注明出处

本文地址：

覆盖 Bootstrap CSS

发布时间：2023/04/28 浏览次数：59 分类：CSS

本文介绍的是著名的 CSS UI 框架 Bootstrap。我们将讨论使用自定义样式覆盖 Bootstrap CSS 的过程。

使用 CSS 制作带圆角的 HTML 表格

发布时间：2023/04/28 浏览次数：107 分类：CSS

这个简短的文章是关于在 HTML 页面上制作圆角表格的 CSS 样式。使用 CSS 制作带圆角的 HTML 表格使图像、表格或 div 段的角变圆的属性是 border-radius。

CSS 设置轮廓 outline 的半径

发布时间：2023/04/28 浏览次数：123 分类：CSS

在本文中，用户将学习如何为 outline 属性设置圆角，与 border-radius 属性相同。在这里，我们已经解释了将圆角应用于轮廓属性的不同方法。

使用 CSS 居中视频

发布时间：2023/04/28 浏览次数：73 分类：CSS

在本文中，用户将学习仅使用 CSS 将 <video> 元素居中。我们已经在下面解释了使用 CSS 使视频居中的多种方法。

使用 CSS 居中内联块

发布时间：2023/04/28 浏览次数：108 分类：CSS

在本文中，我们将创建多个 HTML 元素并将其显示设置为 inline-block。之后，我们将学习使用 display: inline-block 将所有元素居中。

使用 CSS 添加透明边框

发布时间：2023/04/28 浏览次数：98 分类：CSS

在本文中，我们将讨论在 HTML 中的图像、按钮或任何其他对象周围创建透明边框。透明边框是图像或对象周围的边框，可改善用户体验。

使用 CSS 向上移动文本

发布时间：2023/04/28 浏览次数：153 分类：CSS

有时，在开发网页时，我们将文本放在底部或页脚中，因此我们可能需要在文本下方留一个空格并将文本上移。我们将学习如何使用 css 从网页底部向上移动文本。

使用 CSS 和 JavaScript 制作文本闪烁

发布时间：2023/04/28 浏览次数：146 分类：CSS

本文提供了使用 CSS、JavaScript 和 jQuery 使文本闪烁的详细说明。

CSS 防止文本选择

发布时间：2023/04/28 浏览次数：75 分类：CSS

在本文中，我们讨论了防止文本选择和使用具有 none 值的 user-select 属性。此外，您还将了解如何为不同的 Web 浏览器使用该属性。

迹忆客专注技术分享