文档建议反馈控制台
首页
学习
活动
专区
工具
TVP
最新优惠活动
文章/答案/技术大牛
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

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

近期某个项目中需要实现以下需求： 保持背景图片原始宽高比; 如果屏幕宽高比与背景图片宽高比不一致，则以图片中心为基点等比缩放背景图片，以适应屏幕尺寸。...基本算法 demo的结构非常简单，如下： bgDiv是背景区域节点，bgBox的作用是在某些屏幕尺寸下令背景图片居中显示...left: -offsetLeft }); } } }; resize(); $(window).on("resize", resize); })(jQuery...请注意背景区域bgDiv并没有max-height的限制，这是因为不论什么尺寸的屏幕，都要保持背景图片的宽高比。...媒体查询超出边界值的屏幕下，背景图片的宽高限制在图片的原始尺寸，这是为了不拉伸图片造成失真，超过1920×1080的屏幕始终居中显示原始图片尺寸。

1.8K50

【移动端网页布局】移动端网页布局基础概念 ⑥ ( 背景图像缩放 | 不等比例拉伸 - 同时设置宽高值 | 等比例拉伸 - 设置宽度 cover contain 值 )

一、背景图像缩放 ---- 盒子模型 的 背景图片尺寸 是通过 background-size 属性 设置的 , 语法如下 : background-size: 背景图片宽度 背景图片高度; background-size...可设置的值 : 像素长度 : 单位 像素 px ; 百分比长度 : 百分比是 相对于父容器你的百分比 ; cover 值 : 等比例拉伸背景图像 , 使得背景图片完全覆盖背景区域 , 图片的部分内容可能显示不全...; contain 值 : 等比例拉伸背景图像 , 使得 宽度 或 高度 的其中一个达到父容器的尺寸 , 就不再进行拉伸 , 盒子模型部分内容可能显示空白 ; background-size 值设置一个值的情况...> 显示结果 : 2、宽高不等比例拉伸 - 同时设置 宽度 / 高度 的 像素值 / 百分比值 如果为盒子模型 同时设置了 宽度 和 高度 像素值 ,...> 显示效果 : 5、宽高等比例拉伸 - 设置 contain 在宽度或高度一个方向上充满父容器 本示例中 , 拉伸背景图片时 , 宽度先充满了屏幕 ,

1K20
    • 您找到你想要的搜索结果了吗？
    是的
    没有找到

    深入常用CSS声明(一) —— Background

    一直对一些自己常用的css声明掌握得不是很全，只知道常用的一些属性和值，但是对于其他的用法确实一知半解，这篇文章旨在扫盲，先不说有多深的理解，至少做到能够看到这些声明的属性和值的时候做到不陌生。...div class="child-image">child 右下角绝对定位一个容器，背景图片继承自container，左上角默认定位若干个嵌套的容器...() } // 重新计算图片尺寸，直到能容纳一个新的图片为止(会被压缩/拉伸) reCaculateImageWidth() 一个简单的例子：如果我的容器尺寸为：224 x 224， 图片的尺寸为：28...，则按照自身尺寸展示，可以看到下面的例子中图片不会撑满容器 如果图片没有自身尺寸并且没有自身比例，那么图片会填充整个背景容器，图片可能会被拉伸变形 如果图片没有自身尺寸，但是有自身比例...，然后再根据比例计算另一边的尺寸 如果backgound-attachment为fixed时，图片容器尺寸为当前视图窗口 两个具体数值： 按照具体给定的尺寸显示，参看上面解释 图片可能会被拉伸 下面是一个实际的例子截图

    1.7K50

    全栈之前端 | 9.CSS3基础知识之图像元素样式学习

    " alt="balloons"> weiyigeek.top-调整图像溢出图 使用 width/height 解决flex 或者 grid 布局图像填充拉伸问题 描述:...例如：下述示例中有一个两行两列的网格容器，里面所有的div元素有自己的背景色，被拉伸到充满了行和列，默认的图像并未被拉伸，此时设置 img 标签的 width、height 属性为100%来拉伸。...object-fit: fill; # 被替换的内容正好填充元素的内容框, 整个对象将完全填充拉伸此框。 object-fit: none; # 被替换的内容将保持其原有的尺寸。... 执行结果: background-size 属性 - 设置背景图像大小 描述: 此属性设置背景图片大小，图像可以保留原有尺寸，或者拉伸到新的尺寸，或者在保持其原有比例的同时缩放到元素的可用空间的尺寸...此混合模式类似于 multiply，但是，前景只需要和背景的反色一样暗，最终图像就会变为全黑。

    20810

    CSS征途之Background点滴

    （主要是像素方面的比率） (3)background-size: 100px 100px; 标明背景图片缩放的尺寸大小 (4)background-size: 50% 100%; 百分比是根据内容标签元素大小...Background之让背景图片拉伸填充避免重复显示 如何让背景图片拉伸填充，这个问题听起来似乎很简单。但是很遗憾的告诉大家。不是我们想的那么简单。...比如一个容器（body,div,span）中设定一个背景。这个背景的长宽值在css2.1之前是不能被修改的。...就是用来控制背景图片的显示的。所以一般用作背景图片的有2类： 是一整张大图，尺寸和区域大小刚好吻合 一个很小的条状图，通过repeat后，形成一个很规则的大图背景。...背景图尺寸（等比缩小图片来适应元素的尺寸，即contain值）： 这个属性在遇到使用非矩形image(非透明部分不规则)填充元素时候很有用。

    1.5K40

    CSS背景缩写、简写详细

    就想到自己写一个出来 背景共有8个属性： background-color    背景颜色 background-position    背景图像的位置 background-size     背景图片的尺寸...如果只设置一个值，则第二个值会被设置为 “auto”，和图片的尺寸定义类似。 background-size:90% 80% 这表示以父元素的百分比来设置背景图片的宽度和高度。...background-size:cover 这表示把背景图片扩展至足够大，使图片完全覆盖背景区域。这种情况下背景图片可能有一部分无法显示在区域中。...background-size:contain 这表示把图片扩展或拉伸至最大尺寸，以使其宽度和高度完全适应内容区域。...最有效的方法就是在div中加一个块儿元素， 并让它的宽、高撑满父节点，记得给父节点去掉内边距。 给块元素设置背景色，可以用 rgba，也可以用background + opacity实现遮罩

    2.3K10

    【CSS】课程网站 Banner 制作 ① ( Banner 栏测量 | Banner 盒子模型代码 | 代码示例 )

    , 居中对齐即可 ; Banner 条的版心尺寸为 1200 x 420 像素 , 如下图所示 : 版心左侧的 侧导航栏 尺寸为 190 x 420 像素 ; Banner 条版心 右侧的...点击背景 , 吸取颜色值 , 然后点击 " 前景色 " 拾色器 , 可以获取 Banner 条的背景颜色值 #1c036c ; 使用 " 移动工具 " , 勾选 自动选择 选项 , 选择图层 , 点击 背景图片...2、CSS 样式 /* Banner 条样式 */ .banner { /* 宽度自动填充整个浏览器, 这里只设置高度 */ height: 420px; /* 背景颜色 #1c036c , 背景图片水平居中对齐.../* 设置左浮动 使其与表单在同一行显示 */ float: left; /* 按钮宽度 50 像素 */ width: 50px; /* 按钮高度 40 像素 但是为了与父容器匹配 这里拉伸到...: 6px; } /* Banner 条样式 */ .banner { /* 宽度自动填充整个浏览器, 这里只设置高度 */ height: 420px; /* 背景颜色 #1c036c , 背景图片水平居中对齐

    3.9K20

    图片或视频充当网页背景+过渡动画

    背景图片填充也需要知道所在容器的宽高。 独立元素：我不希望导航栏的其他元素会和logo重叠，需要占据空间。..." type="video/mp4"> 在图片背景显示logo中，用于显示背景图片的标签直接作为了最外层标签。...需要设置一个与视图大小相同的div标签，设置为overflow: hidden; 代码中各标签及属性的作用： autoplay：自动播放，但可能被拦截。 loop：循环播放。 muted：静音播放。...如果对象的宽高比与内容框不相匹配，那么该对象将被拉伸以适应内容框。 none：被替换的内容将保持其原有的尺寸。...scale-down：内容的尺寸与 none 或 contain 中的一个相同，取决于它们两个之间谁得到的对象尺寸会更小一些。 组件过渡动画 页面中的文字也有过渡动画，gif原因画质比较差。

    12410

    【经验分享】图片自适应窗口大小css；CSS实现背景图片全屏铺满自适应的方式

    目录 设置背景颜色和边距 设置背景图片 调整背景图片尺寸和位置 完整代码 使用效果如下（展示） 网页版图片效果展示 手机版图片效果展示 如何使用 CSS 创建网页背景效果 在网页设计中，背景是一个重要的视觉元素...设置背景图片 除了纯色背景，我们还可以使用背景图片来增强网页的视觉效果。...no-repeat 表示背景图片不重复平铺，只显示一次。 调整背景图片尺寸和位置 有时候，背景图片可能会被拉伸或压缩，导致失真或模糊。...为了避免这种情况，我们可以设置背景图片的尺寸和位置，使其适应网页。...url(images/bg.png) no-repeat; background-size:100% 100%; background-attachment:fixed; 使用效果如下（展示） 无论怎样拉伸窗口

    82900

    img标签实现和背景图一样的显示效果——object-fit和object-position

    首先我们本次讨论中用到的两张图片的原图就是上面的两张图片（一张宽度大于高度，另一张高度大于宽度） 1、背景图显示正方形效果的做法 首先还是从背景图的做法说起，遇到类似的问题，我们大部分人首先想到的是，能用背景图片做的话...，就直接用背景图片来做了，至少我是这么想的。...class="bg-img1"> 页面效果如下图： ?...替换内容拉伸填满整个contentbox,不保证保持原有的比例。 contain: 中文释义“包含”。保持原有尺寸比例。保证替换内容尺寸一定可以在容器里面放得下。因此，此参数可能会在容器内留下空白。...保持原有尺寸比例。同时保持替换内容原始尺寸大小。 scale-down: 中文释义“降低”。就好像依次设置了none或contain, 最终呈现的是尺寸比较小的那个。

    2.3K60

    HTMLayout 界面贴图技术

    CSS3 无 设置或检索对象的背景图像显示的原点 background-clip CSS3 无 检索或设置对象的背景向外裁剪的区域 background-size CSS3 无 检索或设置对象的背景图像的尺寸大小...HTMLayout CSS 贴图属性 ---- 前景图片一般位于背景图片前面，即使不是同一个节点对象， 例如 div对象#A包含div节点#B,那么#A的前景图片在#B的背景图片前面( 但是#A的背景图片仍然在...如果需要对这些位于中间部位的图片进行拉伸处理, 可以使用CSS中的 ****ground-stretch 指定拉伸方式....拉伸右中切块 o   stretch-top 拉伸上中切块 o   stretch-bottom  拉伸下中切块 这些参数也可以追加在 ****ground-repeat 后面, 例如: ***...id="imgBox" >   鼠标移到图片上看看效果,最大化窗口看看效果 ***/ css = /** body{ margin:0px;

    2.4K40

    你可能不是那么了解的 CSS Background

    background-image: url('') 也可同时设置多张图片，详见进阶篇 - 多背景图片 background-size 背景图片尺寸 常用属性值有： （1）百分比：background-size...图片 多张背景图片可针对每一张设置单独的样式，对应样式用逗号分隔 .div1 { width: 100px; height: 100px; background-color...图片 多背景图片总结： 背景图片所生效的样式，是属性值中与图片位置对应的值； 如果属性值比背景图片的个数要少，那么没有对应的值的图片样式以第一个值为准； 背景图片的层级按从左往右，依次减小。...图片 background-repeat:round 在尽可能多的重复图片的前提下，拉伸图片以铺满容器 ? 图片 背景图片大于容器时 ?...图片 background-repeat:round 缩小图片以铺满容器，长宽与容器尺寸一致（未按比例缩放，图片极有可能变形） background-repeat:space 在不缩放的前提下裁剪图片

    1.4K20

    2019最新Web前端经典面试试题及答案-史上最全前端面试题(含答案)

    大家好，又见面了，我是你们的朋友全栈君。...实现水平和垂直居中 　原理：jQuery实现水平和垂直居中的原理就是通过jQuery设置div等块级元素的CSS，获取div等块级元素的左、上的边距偏移量，边距偏移量的算法就是用页面窗口 的宽度减去该div...border-image：url(border.png) 30 30 round; 2.CSS3背景： · background-size： 属性规定背景图片的尺寸。...在 CSS3 之前，背景图片的尺寸是由图片的实际尺寸决定的。在 CSS3 中，可以规定背景图片的尺寸，这就允许我们在不同的环境中重复使用背景图片。您能够以像素或百分比规定尺寸。...如果以百分比规定尺寸，那么尺寸相对于父元素的宽度和高度。 · background-origin ：属性规定背景图片的定位区域。

    1.9K20
    点击加载更多

    扫码

    添加站长 进交流群

    领取专属 10元无门槛券

    手把手带您无忧上云

    扫码加入开发者社群

    相关资讯

    热门标签

    更多标签

    活动推荐

      运营活动

      活动名称
      广告关闭

      腾讯云开发者

      扫码关注腾讯云开发者

      扫码关注腾讯云开发者

      领取腾讯云代金券

      热门产品

      热门推荐

      更多推荐

      Copyright © 2013 - 2024 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有

      深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 深公网安备号 44030502008569

      腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号 | 京公网安备号11010802020287

      领券