【CSS】CSS 背景设置 ④ ( 超大背景图片设置 | 背景图片定位设置 background-position: center top; )
文章目录
- 一、超大背景图片设置
- 1、超大背景图片问题
- 2、超大背景图片默认显示
- 3、超大背景图片推荐定位方式
- 4、超大背景图片编辑策略
- 二、代码示例
- 1、背景图片展示
- 2、代码示例
- 3、展示效果
一、超大背景图片设置
1、超大背景图片问题
在网站开发时 , 经常遇到 网站首页使用超大背景图片显示 的情况 ,
如 : 背景图片 使用 1920 x 1080 像素的图片 ;
每个人的电脑分辨率不同 ,
- 有的电脑的分辨率可能没有 1920 x 1080 那么大 , 如 800 x 600 , 1080 x 720 等 ;
- 有的电脑的分辨率可能很大 , 如 4K 分辨率 3840 x 2160 ;
这里给出的策略是 尽量把图设置的越大越好 , 图越大 , 能兼容的分辨率越多 ;
- 如果 电脑分辨率低于图片分辨率 , 只能显示部分内容 , 这里建议将核心内容放在中心位置 ;
- 如果 电脑分辨率高于图片分辨率 , 则显示全部内容 , 并且外面还有空白边框存在 ;
2、超大背景图片默认显示
如果设置了大图片作为背景 ,
原图片 :
如果电脑分辨率很小 , 则只能看到图片背景的左上角 ;
如果电脑分辨率很大 , 则大图片背景显示在屏幕的左上角 ;
3、超大背景图片推荐定位方式
因此这里要设置图片背景的位置 , 一般超大背景图片的背景定位都使用
background-position: center top;
进行定位 , x 轴方向上居中对齐 , y 轴方向上对齐到顶部 ,
这样设置 :
如果电脑分辨率很小 , 可以看到图片中心偏上的位置 ;
如果电脑分辨率很大 , 背景图片位于屏幕中心偏上位置 ;
4、超大背景图片编辑策略
图片编辑策略 : 在高分辨率的电脑上可以显示全部内容 , 在低分辨率的电脑上只能显示下图红色矩形框中的内容 , 这里建议 将图片的核心内容放在 图片的中心偏上的位置 , 如下图所示的 白色矩形 范围中 ;
二、代码示例
1、背景图片展示
使用下图作为背景图片 :
2、代码示例
HTML 代码 :
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8" /> <title>超大背景图片位置</title><base target="_blank"/><style>body {height: 3000px;background-image: url(images/background1.jpg);background-repeat: no-repeat;/* 超大图片背景位置 */background-position: center top;}</style>
</head>
<body></body>
</html>
3、展示效果
小屏幕分辨率展示样式 :
大屏幕分辨率展示样式 :
【CSS】CSS 背景设置 ④ ( 超大背景图片设置 | 背景图片定位设置 background-position: center top; )相关推荐
- 小屏隐藏大屏幕显示css,CSS 侧边栏在小屏设备中进行隐藏
Unsplash 侧边栏的作用应该就不用多说了吧,能够很方便我们回到网页的指定位置,在大屏设备中,侧边栏往往是悬浮于屏幕右侧,很方便用户的使用,但在小屏设备中,屏幕空间有限,所以我们会通过隐藏侧边栏的 ...
- js html怎么加入图片,js实现图片上传并预览功能
思路:完成这个功能,首先需要美化上传图片的按钮,然后添加一个 标签,在图片上传之后,用新图片的src替换原来 标签中的src. 如下图所示,是原始的按钮样式: 美化步骤: (1)将上传图片标签采用绝对 ...
- CSS -- CSS背景设置总结(纯色背景、背景图片)
文章目录 CSS的背景 1 背景颜色 2 背景图片 3 背景平铺 4 背景图片位置 5 背景图像固定(背景附着) 6 背景复合写法 7 背景色半透明 8 背景设置总结 CSS的背景 通过 CSS 背景 ...
- CSS的背景属性设置(背景颜色、背景图片、背景平铺、背景附着、背景复合写法)
文章目录 1 背景颜色 2 背景图片 3 背景平铺 4 背景图片位置 5 背景图像固定(背景附着) 6 背景复合写法 7 背景色半透明 8 背景总结 案例:五彩导航 通过CSS背景属性,可以给页面元素 ...
- CSS background 之设置图片为背景技巧
首先先来看看background有那些值: 可以按顺序设置如下属性(可点击进入相应的css手册查看使用): background-color 背景颜色 background-image 背景图片 ba ...
- html背景图片只显示一张图片,img只显示图片一部分 或 css设置背景图片只显示图片指定区域(示例代码)...
17:14 2016/3/22 img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
- CSS浮动+背景图片+边框+文字排版+段落设置
一.CSS浮动 1.简介 默认的框是上下移动,CSS浮动可以控制浮动的框向左或者向右移动float属性属性值 说明 left 元素向左浮动 right 元素向右浮动 none 默认值,元素不浮动浮动意 ...
- html如何把图片在背景图一半,img只显示图片一部分 或 css设置背景图片只显示图片指定区域...
17:14 2016/3/22 img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
- css 设置背景图一半_img只显示图片一部分 或 css设置背景图片只显示图片指定区域...
17:14 2016/3/22 img只显示图片一部分 或 css设置背景图片只显示图片指定区域 background-position: 100% 56%; 设置背景图片显示图片的哪个坐标区域,图片 ...
最新文章
- shell脚本中常见的一些特殊符号和作用详解
- 页面静态化2 --- 使用PHP缓存机制来完成页面静态化(上)(ob_flush和flush函数区别用法)...
- OC_KVC与KVO简单介绍
- 7-172 抓老鼠啊~亏了还是赚了? (20 分)
- Photoshop DDS转化插件的一些问题
- iOS中的预编译指令的初步探究
- php开发微信小程序教程,从零开始开发微信小程序步骤(三)
- Google Dinosour 小恐龙
- 公网ip经常变动的解决方法
- android拖拽 字体变形,17种文字变形的创意方法
- 学Web的第二十一天
- C++转Java个人银行账户管理程序
- 网络带宽相关知识和计算
- Bugku:杂项 小美的秘密part2
- python爬b站弹幕_【Python爬虫】第五课(b站弹幕)
- 数据分析的统计基础(上)
- 添加验证网站之CNAME验证操作-百度搜索资源平台
- python爬取微博评论(通过xpath解析的方式)
- AutoCAD 2007中文版机械设计视频教程
- [BMZCTF]-WEB_ezphp