使用 css 的可拉伸背景图像
这篇简短的文章是关于使用 css 来设计 html 页面的样式,着重于设计任何 html 元素的背景图像。
网页上的 css 样式
有多种方法可以在您的网页上使用 css:
- 内联 css:内联 css 意味着您将 style 属性与任何 html 元素一起使用,并将任何样式属性专门应用于该元素。
-
内部 css:如果您想将样式应用于网站的单个页面,则使用内部 css。 因此,在包含在
元素中的页面上编写样式属性。
- 外部 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 元素一样。
转载请发邮件至 1244347461@qq.com 进行申请,经作者同意之后,转载请以链接形式注明出处
本文地址:
相关文章
发布时间:2023/04/28 浏览次数:133 分类:css
-
本文介绍的是著名的 css ui 框架 bootstrap。 我们将讨论使用自定义样式覆盖 bootstrap css 的过程。
使用 css 制作带圆角的 html 表格
发布时间:2023/04/28 浏览次数:245 分类:css
-
这个简短的文章是关于在 html 页面上制作圆角表格的 css 样式。使用 css 制作带圆角的 html 表格 使图像、表格或 div 段的角变圆的属性是 border-radius。
css 设置轮廓 outline 的半径
发布时间:2023/04/28 浏览次数:140 分类:css
-
在本文中,用户将学习如何为 outline 属性设置圆角,与 border-radius 属性相同。 在这里,我们已经解释了将圆角应用于轮廓属性的不同方法。
发布时间:2023/04/28 浏览次数:265 分类:css
-
在本文中,用户将学习仅使用 css 将
使用 css 居中内联块
发布时间:2023/04/28 浏览次数:118 分类:css
-
在本文中,我们将创建多个 html 元素并将其显示设置为 inline-block。 之后,我们将学习使用 display: inline-block 将所有元素居中。
使用 css 添加透明边框
发布时间:2023/04/28 浏览次数:525 分类:css
-
在本文中,我们将讨论在 html 中的图像、按钮或任何其他对象周围创建透明边框。 透明边框是图像或对象周围的边框,可改善用户体验。
发布时间:2023/04/28 浏览次数:704 分类:css
-
有时,在开发网页时,我们将文本放在底部或页脚中,因此我们可能需要在文本下方留一个空格并将文本上移。 我们将学习如何使用 css 从网页底部向上移动文本。
发布时间:2023/04/28 浏览次数:233 分类:css
-
本文提供了使用 css、javascript 和 jquery 使文本闪烁的详细说明。
css 防止文本选择
发布时间:2023/04/28 浏览次数:81 分类:css
-
在本文中,我们讨论了防止文本选择和使用具有 none 值的 user-select 属性。 此外,您还将了解如何为不同的 web 浏览器使用该属性。