首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
您找到你想要的搜索结果了吗?
是的
没有找到

必应首页平铺背景图片的实现方案

近期某个项目中需要实现以下需求: 保持背景图片原始宽高比; 如果屏幕宽高比与背景图片宽高比不一致,则以图片中心为基点等比缩放背景图片,以适应屏幕尺寸。...以上需求的原则就是始终保持背景图片宽高比,居中等比缩放填满屏幕。 我们知道background-size: cover;是在背景图片保持原始比例的基础上,等比缩放覆盖背景区域。...这样的机制下,屏幕显示的始终是背景图片的左上部分,并不能满足项目的需求。 后来无意中注意到必应首页的背景图片是居中平铺的,行为表现与项目需求完全一致。...请注意背景区域bgDiv并没有max-height的限制,这是因为不论什么尺寸的屏幕,都要保持背景图片的宽高比。...媒体查询超出边界值的屏幕下,背景图片的宽高限制在图片的原始尺寸,这是为了不拉伸图片造成失真,超过1920×1080的屏幕始终居中显示原始图片尺寸。

1.7K50

【CSS】CSS 背景设置 ① ( 背景颜色 | 背景图片 | 背景平铺 )

文章目录 一、背景颜色 1、语法说明 2、代码示例 二、背景图片 1、语法说明 2、代码示例 三、背景平铺 一、背景颜色 ---- 1、语法说明 CSS 的背景颜色样式语法 : 默认的背景颜色是...---- 1、语法说明 CSS 的背景图片样式语法 : 背景图片的链接需要写在 url() 中 , 并且 url() 中的链接可以没有双引号 ; background-image: url(相对路径)...: white; /* 背景图片设置 1....: repeat; , 背景在 X 和 Y 轴方向上平铺 ; 背景不平铺 : background-repeat: no-repeat; , 背景放在盒子左上角 ; 横向平铺 : background-repeat...: repeat-x; , 背景在 X 轴方向上平铺 ; 纵向平铺 : background-repeat: repeat-y; , 背景在 Y 轴方向上平铺 ;

5.7K20

文本类样式 — 背景、文本、字体

学堂是一个便于初学者学习的好平台HTML5学堂是一个便于初学者学习的好平台HTML5学堂是一个便于初学者学习的好平台HTML5学堂是一个便于初学者学习的好平台 代码效果展示: ?...基本语法: background-image: none | url("图片路径"); none : 是无背景图;url : 里面跟的图片的路径;背景图片默认平铺。...2、background-repeat background-repeat有两个属性值,repeat和no-repeat,平铺与不平铺平铺会将一小块的图片铺满整个块元素的背景区域。...为了让h2标题更好看,我们引入了一张背景图片,但是不让h2标题的背景图片发生平铺效果,所以代码就变成这样: .box { width: 600px; height: 200px; } ....让h2标题的背景图片变成在右边出现,同时也不让h2标题的背景图片发生平铺效果,所以代码就变成这样: .box { width: 600px; height: 200px; } .box

2.5K80

【CSS】CSS 总结 ③ ( CSS 背景设置 | 背景颜色 | 背景图片 | 背景图平铺样式 | 背景图片位置 | 超大背景图片设置 | 背景附着 | 背景样式简写 | 背景半透明 ) ★

url() 中的链接没有双引号 3、背景图平铺样式 通过设置 background-repeat 属性 , 可以设置平铺效果 ; 默认平铺样式 : background-repeat: repeat...; , 背景在 X 和 Y 轴方向上平铺 ; 背景不平铺 : background-repeat: no-repeat; , 背景放在盒子左上角 ; 横向平铺 : background-repeat...: repeat-x; , 背景在 X 轴方向上平铺 ; 纵向平铺 : background-repeat: repeat-y; , 背景在 Y 轴方向上平铺 ; 4、背景图片位置 如果 盒子的大小...需要 设置多个 CSS 样式 , 设置 背景图片 , 平铺模式 , 定位方式 , 附着方式 等 , 下面是一个完整的图片背景设置的代码 , 代码很繁琐 ; body { /* 设置一个足够高的高度...* 设置图片背景平铺模式 */ background-repeat: no-repeat; /* 超大背景图片定位 */ background-position: center

23110

平铺拍摄衣服小技巧

电子商务平台、各个社交媒体上,平铺的衣服图片并不少见,该照片形式应用的范围也足够宽广。那么对衣服进行平铺拍摄,有哪些需要注意的呢?...2、确定拍摄方式 平铺拍摄需要足够平整的底面,拍摄时使用的设备也可以有多种,根据你得需求进行选择。专业化拍摄的摄影桌借助专用于平铺摄影的设备,您可以将相机安装在摄影桌子上方的特殊支架上。...手动拍摄一架梯子、一台相机就可以对平铺衣服进行拍摄,衣服平铺在桌面上,灯光可以自由的在衣服周围进行布置。这种方法的缺点是拍摄的重复性低,因为在每次摄影师拍摄不同的产品时都会稍微改变位置。...无论使用相机还是手机拍摄,后期处理肯定是必要的,白色背景图需要RGB(255,255,255),创意图也需要对比度的一些调整。3、衣服前期准备平铺服装摄影与其他产品的摄影没有明显区别。...下面的示例显示了专业解决方案(Orbitvu的平铺式摄影桌)如何让您接近衣服的照明。5、相机设置首先,要拍摄平铺的衣服,请确保您的焦距在35毫米以上。这样可以避免照片角落的失真,并保持项目的正确比例。

1.9K20

HTML以及CSS初级操作

1 HTML5 1.1 html实现页面注册信息验证功能 1.1.1 什么是Html? html是用来描述网页的一种语言,是一种超文本标记语言。也就是说,html不是编程语言。...以此我们进行分类: 块元素:无论内容的多少,该元素都独占一行 行内元素:内容撑开宽度,左右都是行内元素的可以排在一行 1.2 使用媒体元素在页面中播放视频 1.2.1 html5的媒体元素 视频元素 html5...1.5.3 背景样式 div标签 块级元素 独占一行 , 可以将页面分割出一块独立的、不同的部分 背景属性 背景颜色 在css中使用backgroun-color来设置背景颜色,与color用法相同 背景图像...在css中使用backgroun-image属性设置背景图片,通常会与background-position两个属性共同使用;backgroun-image:url(““)来引入背景图;背景重复方式通常使用...background-reapeat来设置 其参数包括 :repeat沿着水平和垂直两个方向进行平铺,no-repeat不平铺并且图像只显示一次,repeat-x只沿着水平方向平铺,repeat-y只沿着垂直方向平铺

2.5K30

CSS显示模式

display: block; 块元素转化为行内元素:display:inline; 转化为行内块元素:display:inline-biock; 注意:单行文字垂直居中,让行高等于盒子的高度 CSS背景 背景图片...:background-image:url(地址) 注意:会默认铺满盒子 背景平铺(就是会不会铺满整个盒子) 用background-repeat来实现 参数值 类型 repeat 背景图像在x和y方向都平铺...no-repeat 背景图像不平铺 repeat-x 背景图像在x方向上平铺 repeat-y 背景图像在y方向上平铺 注意:可以与背景颜色一起存在,背景颜色会被置于最底层 背景图片位置 用background-position...注意:默认值是scroll 背景属性的复合写法: background:背景颜色 背景图片地址 背景平铺 背景图像滚动 背景图片位置; 背景颜色半透明 用 background: rgba(); 来实现...url(图片路径) background-repeat 是否平铺 repeat/no-repeat/repeat-x/repeat-y background-position 背景位置 length/

78900

CSS笔记(5)

CSS背景 通过CSS背景属性,可以给页面元素添加背景样式.背景属性可以设置背景颜色,背景图片,背景平铺,背景图片位置,背景图像固定等....背景图片 background-image属性描述了元素的背景图像.实际开发常见于logo或者一些装饰性的小图片或者是超大的背景图片.优点是非常便于控制位置(精灵图也是一种运用场景)....background=image : none | url (url) 参数值 作用 none 无背景图(默认的) url 使用绝对或相对地址指定背景图像 背景平铺 如果需要在html页面上对背景图片进行平铺...可以使用background-repeat属性 background-repeat: repeat | no-repeat | repeat-x | repeat-y 参数值 作用 repeat 背景图片在纵向和横向平铺...(默认的) no-repeat 背景图片不平铺 repeat-x 背景图片在横向上平铺 repeat-y 背景图片在纵向上平铺 页面元素即可以添加背景颜色也可以添加背景图片,只不过背景图片会压住背景颜色

68710

HTML详解连载(6)

,使用背景图实现装饰性的图片效果。...属性名 background-image(bgi) 属性值 url(背景图URL) 注意 背景图默认是平铺的效果 背景图平铺方式 属性名 background-repeat(bgr) 属性值 属性 含义...no-repeat 不平铺 repeat 平铺(默认) repeat-x 水平方向平铺 repeat-y 垂直方向平铺 背景图位置属性 属性名 background-position(bgp) 属性值...作用 设置背景图大小 属性名 backgro-size(bgz) 常用属性值 关键字 含义 cover 等比例缩放背景图片以完全覆盖背景区,可能背景图片部分看不见 contain 等比例缩放背景图片以完全装入背景区...背景复合属性 属性名 background(bg) 属性值 背景色,背景图背景图平铺方式,背景图位置/背景图缩放,背景图固定(空 格隔开,不区分顺序) 显示模式 标签(元素)的显示方式 作用 布局网页的时候

12020

CSS background属性

设置背景颜色 background-image 设置背景图片地址 background-repeat 设置背景图片如何重复平铺 background-position 设置背景图片的位置 background-attachment...下面再来看看使用背景图片。 background-image 设置背景图片地址 ? ---- 设置一下第二个div的宽高,让背景图片显示好看一些。 ? 那么能否设置背景图片不重复平铺呢?...background-repeat 设置背景图片如何重复平铺 设置background-repeat: no-repeat;则不会重复平铺。 ? ---- 如果需要平铺水平方向的内容呢?...---- 如果需要平铺垂直方向的内容呢?设置background-repeat: repeat-y;即可。 ? ---- 那么全部内容都要平铺呢?...---- “background:cyan url(bg.jpg) repeat-y”,纵向平铺盒子,盒子其他部分显示背景颜色“cyan”。 ?

1.2K10
领券