标签: background-size

我有一个带背景图片的div集:

<div>Play Video</div>

使用以下CSS:

div {
background-image: url('icon.png');
background-image: url('icon.svg'), none;
background-size: 40px 40px;
background-repeat: no-repeat;
background-position: 90% 50%;
padding: 20px;
width: 150px;
}

背景大小在Firefox,Safari和Chrome中得到尊重.在IE8中,SVG由PNG文件替换.但是,在IE9和IE10中,SVG文件的大小很小.这个问题似乎与div的宽度和高度有关.如果我添加150px的高度,SVG将正确呈现.如果我把它缩小(即100px),图形就开始缩小.

有没有人找到办法在资源管理器中解决这个问题？有没有办法告诉IE使用背景大小值独立于div的宽度和高度？

如何在框内调整图像大小和重新定位,使其覆盖整个框,类似于background-size: cover工作方式.

<div class="box" style="width: 100px; height: 100px;">
  <img src="pic.jpg" width="413" height="325">
</div>

我知道我必须添加overflow:hidden到盒子和图像需要position: absolute.但是什么样的公式让我得到了适合图像的新尺寸,并留下了+顶部位置？

我正在使用该background-size属性获得完整的宽度和高度背景图像,但无法在纵向视图中将其完全覆盖在Nexus7平板电脑上的Chrome中.它只覆盖宽度而不是高度,即200px它下面有大约白色空间.但是,当我在桌面Chrome(或其他任何内容)和垂直监视器上查看网站以模拟纵向尺寸时,它没有任何问题.

有人有解决方案吗？

CSS:

html { 
    background: url(/images/post_bg.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    -ms-filter: "progid:DXImageTransform.Microsoft.AlphaImageLoader(src='/images/post_bg.jpg', sizingMethod='scale')";
}

肖像屏幕截图:

我有一个包含背景图像的图表列表.类似于以下内容:

<ul>
  <li>
    <figure style="background-image: url(...);"></figure>
  </li>
  <li>
    <figure style="background-image: url(...);"></figure>
  </li>
  <li>
    <figure style="background-image: url(...);"></figure>
  </li>
</ul>

这些图像中的每一个都background-size设置为cover并background-attachment设置为fixed.

figure {
  width: 100%;
  height: 100%;
  background-size: cover;
  background-attachment: fixed;
}

当每个图形占据整个视口时,这可以正常工作,但如果存在任何类型的偏移,则背景图像被剪切.

据我所知,这是设计(https://developer.mozilla.org/en-US/docs/Web/CSS/background-size#Values).

我希望图像可以垂直或水平剪辑,但不能同时剪辑,而是以图形本身的大小为中心.

我知道有javascript解决方案但是有没有办法用CSS做到这一点？

这是一个工作示例:http://codepen.io/Godwin/pen/KepiJ

当我将div的图像中的background-size属性设置为background-size: cover;or时 background-size: 100%;,两者看起来都是一样的.

有什么不同？什么时候我应该使用封面和100%？

这可能已经在某个地方得到了回答,但我在搜索之后还没有找到.

我有一系列背景图像的div.大小设置为background-size:cover.

但我希望能够让图像放大并在悬停时增长.此转换不适用于看起来的封面属性.实际上,图像放大但没有过渡效果.它立即从"封面"到,在这种情况下,110%.当原始背景大小设置为100%时,它工作正常.

但有了这个,在调整页面大小时,图像似乎有点落后于div,这不是我想要的.封面始终保持中心,我想要的.

任何有关如何进行转换的建议,因为它会以覆盖或相同的效果增长.

Ilmiont

即使background-size应用了属性,有没有一种简单的方法可以使用Javascript或jQuery获取背景图像的最终高度和宽度？

我的意思是,我知道我可以获取背景图像url并将其加载到一个Image对象然后获得宽度和高度.但它是源图像的大小.如果有人用CSS缩放它,那么大小就会改变

我怎样才能找到它的最终尺寸？

@编辑

它与标记为类似的问题不同,因为它没有说如果有人改变了如何获得像素的大小 background-size

问题是我有几个DIV的位置绝对具有背景大小:封面; 并通过javascript计算它们的高度以填充100%的视口.在每个桌面浏览器和移动Firefox上一切都很好,但在移动铬地址栏上(出现/消失时)更改$(windows).height(); 值.每次这样做时,这会导致古怪的背景图像重新缩放.有没有一个解决方法,总是显示地址栏(所以窗口高度值不会改变),或其他一些保持背景大小的解决方案:封面; 无论地址栏如何都缩放相同？

我试图实现我最近看到的效果,其中背景图像放大悬停.我几乎用这里的例子来做到这一点:https://jsfiddle.net/qyh6nbwt/但它看起来非常不稳定(你会理解我的意思是悬停在它上面),我在osx上运行最新的chrome版本,有尚未在其他浏览器中检查过它.有没有办法让它更顺畅,所以放大时不会"摇晃"？

HTML

<div id="example">
    test
</div>

CSS

#example {
   background-image: url(http://www.jeroenkemperman.nl/wp-content/uploads/2014/06/Johns_Inc_Pizza_Spaghetti_wikipediacommons.jpg);

    background-position: center center;
    width: 250px;
    height: 250px;
    transition:all 1000ms ease;
    background-size: 100% auto;
}

#example:hover {
    background-size: 160% auto;
}

我有一个背景图像，我想覆盖该元素，使用background-size: cover;但是，我还想将其在两个方向上放大 110%，超出了原来的cover范围，以便我随后可以使用 来移动它background-position。

换句话说，我想background-size: cover将周围的 div 视为在两个方向上都大 110%。

有没有办法纯粹用 CSS 来做到这一点？

如果我理解正确的话，这将是一种方法，但max()不是标准的 CSS3：

background-size: max(auto 110%) max(auto 110%);