1. David Wu首页
  2. web前端
  3. CSS

绝对响应全屏背景图片

传统的观点是,大图出售。较为主观意见告诉我们,大图相当。不管什么原因,我们喜欢我们的大图像。更重要的是,我们真的很喜欢把他们的背景,并把大的文本在它们之上。 我不是在这里辩论,我们是否应该这样做。即使我认为大背景图象是网页设计的克星(我没有),人们会继续使用它们。这包括我。他们是很大的。他们是漂亮。有什么理由 WP网站建设

传统的观点是,大图出售。较为主观意见告诉我们,大图相当。不管什么原因,我们喜欢我们的大图像。更重要的是,我们真的很喜欢把他们的背景,并把大的文本在它们之上。

我不是在这里辩论,我们是否应该这样做。即使我认为大背景图象是网页设计的克星(我没有),人们会继续使用它们。这包括我。他们是很大的。他们是漂亮。有什么理由不喜欢?

他们有他们的地方在我们的集体工具箱,但我们需要做他们的权利。我不只是在谈论选择合适的图像,这是给你的。我说的是确保我们的图像不杀人人的带宽。如果我们真的要被设计的“移动为先”,这已经得到了包括我们的图像。

问题

现在,当人们想填补一个页面的背景,甚至只是一个相当大的分区,他们往往只是用这样的CSS(我使用单独的每个属性为清楚起见):


身体,.bigdiv {
背景图像:网址(路径/要/ image.jpg文件);
背景大小:盖;
}

现在,这是罚款台式机和无限数据任何互联网连接,但如果越来越大量移动用户想玩?难道你真的打算让他们下载潜在的巨大的.jpeg到手机上,花费他们实际的钱吗?

了解更多关于响应式设计:

  • 响应设计:使你的工作印刷术
  • 保持竞争优势 – 了解响应式设计
  • 响应图片 – 为什么这是必须的,4种方法把它完成
  • 响应式设计:你需要知道什么
  • 响应式设计图书设计更智能

我们有三种解决方案,让我们响应背景图片:

  1. 媒体查询
  2. 图像设置属性
  3. 绝对响应背景图片(稍后更多)

媒体查询

这一个是显而易见的解决方案。您可以定义一个小的背景图像。然后,对于越来越大的屏幕尺寸,你可以使用媒体查询定义越来越大的背景图像。

例如,您会使用CSS是这样的:


身体{
背景:网址(图像/小image.jpg文件);
}
@media屏(最小宽度:700像素){
体{
背景:网址(图像/大-image.jpg文件);
}
}

优点

这是显而易见的解决方案,真的。我们使用纯CSS,没有更改的标记。

问题

这种方法带有一个问题:移动浏览器,尤其是老年人,往往会下载所有图像,击败了锻炼的目的。好消息是,有变通方法。坏消息是:他们的解决方法。他们是在默认情况下有点臃肿。

尽管如此,他们的工作不够好。如果您无论如何要学习它们,检查了这一点:媒体查询与资产下载结果

图片集

所有图像组的作用是提供一种通常除了尺寸全部相同图像的列表。由于与srcset HTML属性,浏览器会为自己决定哪个形象是最好的基于设备上下载。

我包括源​​文件为这两种解决方案,所以你可以看到他们在行动。您可以在下面下载这些。现在,这里就是你需要知道的:

该HTML


<!DOCTYPE HTML>
<HTML LANG =“EN”>
<HEAD>
<META的charset =“UTF-8”>
<标题>纯CSS响应背景图像演示</ title>
</ HEAD>
<BODY>
<H1>纯响应CSS背景图像演示</ H1>
</ BODY>
</ HTML>

该(基本)CSS


身体{
背景图片:图片集(
URL(常规image.jpg文件)1X,
URL(双尺寸-image.jpg的)2倍
);
}

问题

让我们只是预留,一会儿,事实上,对于图像设置属性浏览器的支持是几乎没有的地方它需要。让我们忽略你需要做这项工作的供应商前缀。真正的问题是,图像不基于屏幕/视口的大小选择,但基于像素密度。

这意味着它是伟大的视网膜屏幕和常规种之间切换。需要对那些大规模的iMac屏幕更大的图像?在图像设置功能为您提供帮助。如果这是你所需要的,那么图像集是给你的。

你可以将它用于小反正图片:图标,个人资料照片,以及诸如此类的其他事情。这些都是足够小,他们不会打破移动用户的数据计划。但是,嘿,我们需要大量的背景图片,对吧?所以这个解决方案尚未就绪。

绝对响应背景图片

所以现在,大家都看到了我们所需要的:响应的图像,选择基于屏幕/视口大小,我们希望浏览器只下载其中之一。你猜怎么了?我们可以做到这一点。

坏消息是,它需要更改您的标记。这种变化是最小的,但是。所有你需要做的就是添加一个div和背景图像本身。

这整个事情适用于两个概念:绝对定位和srcset HTML属性。绝对定位已经有一段时间了,它只是工作像它应该。没有什么可担心的存在。的srcset属性,另一方面,是较新的,少孔的支持。

然而,根据最新的使用统计数据,srcset是,还有一些移动浏览器的支持。“有些”不理想; 但是在它的工作原理浏览器,好事自然会发生。这些浏览器的用户将接收响应图像的好处。其他用户将得到什么,他们无论如何都会得到。

华友世纪渐进增强!下面,你会发现你需要做这项工作的基本的HTML和CSS。和做检查的源代码包含的zip文件。

绝对响应背景图片这仅仅是一个截屏

该HTML


<!DOCTYPE HTML>
<HTML LANG =“EN”>
<HEAD>
<META的charset =“UTF-8”>
<标题>绝对响应背景图像演示</ title>
</ HEAD>
<BODY>
<! -注意事项我已经尽量选择一个中间地带作为默认图像尺寸变,只是作为后备。- >
<DIV CLASS =“bodybg”>
<IMG SRC =“图像/中等背景image.jpg的”
SRC-设置=“图像/小image.jpg的500W,
图像/中image.jpg的1000W,图像/large-image.jpg2000瓦特“
ALT =”“>
</ DIV>
<H1>纯CSS响应背景图像演示</ H1>
</ BODY>
</ HTML>

在CSS

注:该解决方案的一部分,CSS改编自这个演示:http://codepen.io/ErwanHesry/pen/JcvCw/

/ *此解决方案不只是为整个网页的工作。它可适合于较小的含元素。现在,我们正在做的视口的大小。* /


.bodybg {
位置:亲属;
溢出:隐藏;
宽度:100%;
高度:100vh;
}
.bodybg IMG {

/ *这些特性确保了“背景图片”涵盖了所有可用的空间。* /


位置:绝对的;
顶部:0;
右:0;
底部:0;
最小宽度:100%;
最小高度:100%; / *该位中心的形象。* /
左:50%;
变换:translateX(-50%);

/ *在这里,我们确保没有伸出的一面,不应该。* /


溢出- X:隐藏;
}

向前走

绝对响应背景图片TM(开玩笑)是公认不完美的解决方案,但我们与不完善的浏览器中工作。何时何地工作,它会为您节省(和其他人)宝贵的带宽。不能真正争辩的。

Read more: http://www.webdesign.org/absolutely-responsive-full-screen-background-images.22549.html#ixzz3zAzsTlFU

原创文章,作者:网站建设,如若转载,请注明出处:https://www.davidwu.net/archives/5739

服务项目 服务内容 收费标准(元)
开发定制 WordPress主题/插件开发定制 (以最终需求为准)
主题/插件汉化 汉化团队WordPress主题/插件,翻译率95% (以标的主题/插件的句子数量为准)
服务器环境配置 基于您现有服务器,搭建配置网站运行环境,结合我们多年来实战经验,可完美支持WordPress等PHP程序运行,并配置伪静态规则、优化目录权限等问题。服务器我们强烈推荐使用Linux系统。 100元/次
网站托管 若贵站目前尚无技术人员,无法完成服务器环境配置,可选择我们的网站托管服务,直接交付正常运行的WordPress站点,并且无需担心服务器的后续维护工作,一切都由我们来帮您完成。 标配套餐:1000元/年/站点 高配套餐:联系客服获取
网站加速优化 从服务器后端配置优化到WordPress数据库缓存、前端页面缓存、JS和CSS压缩合并,全方位优化网站加载速度,实现秒开。(此服务仅针对(云)服务器/VPS) 500元/次(仅站内优化200元/次)
主题配置 本站所有主题均支持,可快速实现,若有任何问题可以咨询客服解决,若您希望我们提供配置服务,可选购此服务。 英文主题安装 60元/次 汉化主题安装 30元/次
HTTPS配置 HTTPS已经不断普及,并且有着更高的安全性以及SEO上的优待。该服务收取的为服务费,SSL证书产生的费用请自行承担。 100元/次
网站搬家 迁移网站所有文件和数据库信息、网站相关配置的调整、以及迁移中的疑难问题故障排除。 标准收费:500元/次 若网站数据量大,需协商
网站运维 提供整站的运维服务,保证网站正常运行。包含:网站故障定位及排除、网站数据备份和恢复、网站攻击及木马等问题的处理等 标准收费:2000元/年 IP 5000以上需协商

发表评论

邮箱地址不会被公开。 必填项已用*标注