background-size相关内容
我正在尝试实现全屏无限滚动背景效果,该效果必须延伸到视口的整个高度和宽度。 这里是demo。 我尝试过的解决方案是获取一个具有视口的100vh和100vw的包装元素,然后在其中放置2个高度为100%的,它们具有相同的背景图像和background-size: cover属性。我使用的图片大小为:1920px×808px。 然后我在包装器元素上应用了以下动画: @keyfra
..
我正在尝试设置 div 的大小(宽度和高度)以匹配它的背景图像大小,但我无法让它工作.背景图像大小必须以百分比表示,因为我正在处理响应式网站.在较小的屏幕上,背景应完全显示(宽度较小,但仍按比例显示),并且具有图像的 div 应遵循该大小. 我尝试了背景尺寸的各种值,例如自动 100%、覆盖、包含等,但没有任何效果.这里有一个类似的问题:将 div 缩放到背景图像大小 但它也没有解决我的问题
..
问题是我有一些绝对定位的 DIV,它们具有背景大小:cover;并且它们的高度由 javascript 计算以填充 100% 的视口.在每个桌面浏览器和移动 Firefox 上一切都很好,但在移动 chrome 地址栏上(出现/消失时)更改 $(windows).height();价值.每次这样做都会导致古怪的背景图像重新缩放.是否有一种解决方法可以始终显示地址栏(因此窗口高度值不会改变),或其他
..
我有一个带有背景图片的 div: 播放视频 具有以下 CSS: div {背景图像:url('icon.png');背景图片:网址('icon.svg'),无;背景尺寸:40px 40px;背景重复:不重复;背景位置:90% 50%;填充:20px;宽度:150px;} 背景尺寸在 Firefox、Safari 和 Chrome 中受到尊重.在 IE8 中,SVG 被替换为 PNG 文件
..
当用户悬停链接(div)带有图像背景时,我想制作缩放效果. 当我只想缩放背景而不是文本时,我不知道该怎么做!而且我找不到最好的方法. 这是一个代码(不能如我所愿): .light_blue {显示:块;颜色:#fff;背景重复:不重复;-webkit-background-size: 封面;-moz-background-size: 封面;-o-background-size:
..
我在跨越浏览器100%的元素上运行了以下代码: #section_white { 背景固定:固定; background-image:url(image_url_here.jpg); 背景位置:100%100%; 背景重复:不重复不重复; background-size:cover; } 我需要做的是使图像跨过整个宽度浏览器,同时保持固定状态(从而允许内容在
..
我是html和css的新手,并且正在尝试创建一个个人网站以供学习. 背景图像无法拉伸到无法适合屏幕的位置,我遇到了困难.在下面提供代码. body{ background-image: url(backgroundimage.jpg); /*background-color: #95afc0;*/ background-size: cover; } 当窗口
..
所以我有如下的CSS代码: .jumbobg { background: url('http://znc.mane-frame.com/static/silverleaf.png') fixed no-repeat, url('../img/banner-1008444.jpg') no-repeat, grey; } 我想知道第一张图像(silverleaf.png)-如何使
..
看看这个小提琴,他在野生动物园和Chrome上的工作会有所不同: https://jsfiddle.net/sew120xt/1/ 所需外观(镀铬): https://i.stack.imgur.com/q9ABs.png 坚固的外观(野生动物园) https://i.stack.imgur.com/Sc6YF.png 似乎Safari会将TR的样式视为其子代的样式,
..
我正在尝试设置div的大小(宽度和高度)以匹配其背景图片的大小,但是我无法使其正常工作. 背景图片的大小必须以百分比为单位,因为我要处理的是自适应网站.在较小的屏幕上,背景应完整显示(宽度较小,但仍成比例),并且具有图像的div应该遵循该尺寸. 我尝试了各种背景大小的值,例如auto 100%,cover,contain等,但没有任何效果. 这里也有类似的问题:将div缩放为背景图像大小,但
..
如何在框内调整图像大小和重新定位,使其覆盖整个框,类似于 background-size:cover 的工作方式。
我知道我必须添加 overflow
..
我的PNG图片尺寸是1000px×1000px。 我在一个高度为550px, background-size:cover 属性的DIV中用它作为背景图片。 我的问题是,这个背景大小的封面似乎没有工作。我的照片没有缩小到DIV的大小。这是什么问题? 解决方案没有看到你的实际代码,答案只能基于假设,但我假设在这种情况下,我的假设必须是正确的,基于所提供的截图。 从屏幕截图看,您的元
..
我正在尝试转换 background-size 和 background-color 。 Chrome :转换 background-size 无效 Firefox :两者都正常工作 “https://jsfiddle.net/0Lp787z1/1/”rel =“nofollow”> fiddle 。 .highlight {display:block;位置:相对; / *
..
我使用 background-size 属性来显示完整宽度和高度的背景图片,但无法在Nexus7平板电脑的Chrome中以纵向视图完全覆盖。它只覆盖宽度,而不是高度,即在它下面有大约 200px 的空白。但是,当我在桌面Chrome(或其他任何东西)和垂直监视器上查看网站以模拟纵向尺寸时,它不会有问题。 任何人都有解决方案? p> CSS: html { background
..
我要去bonkers。 IE11拒绝用背景图像填充DIV的整个区域,即使我已经将background-size属性设置为覆盖。请考虑以下示例: CSS: .bg { width:100%; min-height:220px; background:url(“bg.jpg”)center top no-repeat; background-attachment:fixed
..
我想实现我最近看到的一个效果,其中背景图片放大悬停。我几乎用这里的例子: https://jsfiddle.net/qyh6nbwt/ 但它似乎很不稳定(你会理解我的意思是悬停在它),我在osx运行最新的chrome版本,还没有检查它在其他浏览器。 有一种方法可以使它更平滑,所以它不会在放大时“摇动”。 HTML
test
..
这可能已经在某个地方回答了,但是我没有找到一些搜索后。 我有一系列的div与背景图像。大小设置为background-size:cover。 但我想能够让图像放大并在悬停时增长。这种转换不适用于看起来的cover属性。实际上,图像缩放,但没有过渡效果。它立即从“覆盖”,在这种情况下,110%。当原始背景大小设置为100%时,它工作正常。 但是,在调整页面大小时,图像似乎平铺在di
..
是否有一个简单的方法来获取背景图像的最后的高度和宽度使用Javascript或jQuery,即使应用 background-size 属性吗? 我的意思是,我知道我可以得到背景图像url并将其加载到 Image 对象,然后获取宽度和高度。但它是源图像的大小。如果有人用CSS缩放它,然后尺寸改变 如何找到它的最终尺寸? @edit 它不同于标记为相似的问题,因为它没有说如何获
..
我有一个div设置了背景图片:
播放视频 使用以下CSS: div { background-image:url('icon.png'); background-image:url('icon.svg'),none; background-size:40px 40px; background-repeat:no-repea
..
我有一个包含背景图片的数字列表。类似以下内容:
..