如何拉伸背景图像以适合网页(stretch a background image to fit a web page)

本文介绍了使用CSS3拉伸背景图像以适应网页的两种方法。...

知道什么

  • 首选方法:使用CSS3属性作为背景大小,并将其设置为覆盖。
  • 替代方法:使用CSS3属性将背景大小设置为100%,背景位置设置为中心。

本文介绍了使用CSS3拉伸背景图像以适应网页的两种方法。

现代方式

图像是吸引人的网站设计的重要组成部分。它们为页面增加了视觉趣味,并帮助您实现所需的设计。使用背景图像时,您可能希望图像拉伸以适合页面,尽管设备和屏幕尺寸范围很广。

拉伸图像以适应元素背景的最佳方法是使用CSS3属性作为“背景大小”,并将其设置为“覆盖”。

div { background-image: url('background.jpg'); background-size: cover; background-repeat: no-repeat;}

看一看这个例子。这是下图中的HTML。

现在,看看CSS。它与上面的代码没有太大区别。还有一些补充,使它更清楚。

现在,这是全屏显示的结果。

通过将backgroundsize设置为cover,可以保证浏览器将自动缩放背景图像,无论背景图像有多大,以覆盖应用它的HTML元素的整个区域。看看一扇更窄的窗户。

根据caniuse.com,超过90%的浏览器支持这种方法,这使得它在大多数情况下都是一种明显的选择。它确实会给Microsoft浏览器带来一些问题,因此可能需要回退。

退路

下面是一个使用背景图像作为页面主体的示例,该示例将页面大小设置为100%,以便页面始终拉伸以适应屏幕。这种方法并不完美,可能会造成一些未覆盖的空间,但通过使用background position属性,您应该能够消除这个问题,并且仍然能够适应较旧的浏览器。

body { background: url('bgimage.jpg'); background-repeat: no-repeat; background-size: 100%; background-position: center;}

使用上面的示例,将背景大小设置为100%,您可以看到CSS看起来基本相同。

在全屏浏览器或与图像尺寸相似的浏览器上,结果几乎相同。然而,随着屏幕变窄,缺陷开始显现。

显然,这并不理想,但它可以作为一个后备方案。

据caniuse.com称,该属性适用于IE 9+、Firefox 4+、Opera 10.5+、Safari 5+、Chrome 10.5+以及所有主要的移动浏览器。这涵盖了目前所有可用的现代浏览器,这意味着您应该使用此属性,而不用担心它在某人的屏幕上无法工作。

在这两种方法之间,支持几乎所有浏览器应该不会有任何困难。随着背景尺寸:cover在浏览器中获得更多的接受,即使这种回退也将变得不必要。显然,CSS3和更具响应性的设计实践简化了HTML元素中使用图像作为自适应背景的过程。

  • 发表于 2021-09-08 11:11
  • 阅读 ( 74 )
  • 分类:数学

你可能感兴趣的文章

如何建立一个网站:初学者

...nt-family: 'Helvetica', 'Arial'; /* initial fonts */}#top-bar {width: 100%;background: #F1F1F1; /* light gray */border-bottom: 1px solid #D4D4D4; /* dark gray "underline" */height: 25px;} ...

  • 发布于 2021-03-15 13:25
  • 阅读 ( 264 )

什么是javascript?它是如何工作的?

...统编程语言的特殊特性。我们将深入研究它是什么,它是如何工作的,以及你能用它做什么。我们把它分解一下。 ...

  • 发布于 2021-03-18 04:01
  • 阅读 ( 282 )

css3基本属性备忘单

...fies the position of table's caption.empty-cellsShows or hides borders and backgrounds of empty table cells.table-layoutSpecifies a table layout algorithm.border-collapseSpecifies whether table cell borders are connected or separated.Text PropertiesdirectionDefines the text direction/writing directi...

  • 发布于 2021-03-19 04:34
  • 阅读 ( 299 )

理解基本html代码的5个步骤

...一些基础知识,包括什么是HTML,一些基本概念,以及它如何与其他语言交互。把这当成一个“傻瓜的HTML”速成班。 ...

  • 发布于 2021-03-21 16:54
  • 阅读 ( 275 )

使用css格式化文档以便打印

... body { background: white; color: black;} ...

  • 发布于 2021-03-28 16:05
  • 阅读 ( 246 )

为什么网页不立即显示它们的文本?

...d that recently many websites are slow to display their text. Usually, the background, images and so on are going to be loaded, but no text. After some time the text starts appearing here and there (not always all of it at the same time). It basically works the opposite as it used to, when the text ...

  • 发布于 2021-04-11 21:33
  • 阅读 ( 154 )

如何拥有自己的网站(即使你不能建立一个)第3部分

...e we downloaded in part 1) have basic menu-based opti*** for switching out background images (or flat colors) as well as header images, link colors, and other various minor edits.   Most of these you can find under “Settings” or “Appearance” in the left hand menu of your WordPress administr...

  • 发布于 2021-04-12 12:27
  • 阅读 ( 227 )

30个伟大的photoshop技巧和技巧,帮助您的计算机图形技能

...gramming. There are many ways to isolate an object in an image or remove a background in Photoshop. The following article shows you a very easy, one-button method using an action file you can download. 使用免费的Photoshop操作自动删除背景 如何用photoshop操作在几秒钟内编辑数...

  • 发布于 2021-04-12 17:13
  • 阅读 ( 312 )

如何用任何图像制作经典的红色/青色3d照片

...e entire canvas again, this time to add a slightly different effect to the background. to select “Free Transform” in Photoshop. Enlarge the Red channel of this layer in some unusual way. In this example, it was stretched horizontally. You can scale it up, skew, rotate, or simply offset it as ...

  • 发布于 2021-04-12 20:53
  • 阅读 ( 175 )

使用photoshop频道优雅地从图像中删除背景

...es you the best contrast. Your image should look the brightest, while your background should look the darkest. Make a copy by dragging the channel you want to the icon or by right clicking and choosing “Duplicate.” Press to bring up Levels. Adjust them intensely, bringing your darks and light...

  • 发布于 2021-04-13 05:53
  • 阅读 ( 135 )
h3d1axzao29c28
h3d1axzao29c28

0 篇文章

相关推荐