标签: background-size

我有一个 div，我正在其中更改背景（使用 jQuery）。这些 CSS3 规则允许新的背景图像很好地交叉淡入淡出

transition: background-image 1s ease-in-out;
background: center center no-repeat;
background-size: cover;
-webkit-background-size: cover;
-moz-background-size: cover;

问题是背景尺寸也在变化。

因此，如果它从肖像切换到风景背景图像，例如，在淡入淡出时，图像会被垂直压扁，然后水平拉伸。这可能有点令人恶心。

background-size: cover除了仅淡入淡出过渡背景图像本身而不使用背景大小之外，还有什么方法可以使用吗？

我使用以下内容使用 css 裁剪和居中图片（抱歉内联 css，但这只是为了解释我的问题）

<div style="width: 236px;height: 233px;background-image:url('path-to-picture');background-size:cover;background-position:center center"></div>

这在大多数浏览器上都可以正常工作，但我需要在 html 电子邮件中重现相同的内容，不幸的是电子邮件客户端似乎无法识别“背景大小”。

有没有一种简单的方法来裁剪 html 电子邮件中的图片？

感谢您的帮助。

我正试图在悬停时对我的背景图像进行转换.这是我的代码到目前为止:

HTML

<div class="item-one"></div>

CSS

.item-one { 
    height: 345px;
    width: 256px;    
    background: url('http://placehold.it/256x345') scroll no-repeat center center;
    background-size: cover;
    -webkit-transition: background-size 1500ms linear;
    -moz-transition: background-size 1500 linear;
    -o-transition: background-size 1500 linear
    -ms-transition: background-size 1500ms linear;
    transition: background-size 1500ms linear;
}

.item-one:hover {
    background-size: 150%;  
}

请参阅JSFIDDLE

但这对我不起作用,在不同的浏览器中测试过.其他过渡如背景颜色按预期工作.此属性的转换是否有任何限制？

如果我正在使用，当浏览器大小发生变化时，如何消除空格background-size:contain;？

对于较小的浏览器尺寸，图像和文本之间的空白太多。网站是： http: //16debut.com/test.html

CSS 是：

body { 
    margin:0px 0px; 
}

#hero {
    background-clip: content-box;
    background-image: url("imgtop.png");
    background-size: contain;
    background-repeat: no-repeat; 
    position: relative;
    height: 235vh;
}

#content {
    padding: 100px 50px;
    text-align: center;
    width: 80%;
    margin: 0px auto;
}

#content h2 {
    margin: 0px 0px 30px 0px;
}

#footer {
    padding: 30px 0px;
    text-align: center;
    background: #ddd;
}

当用户将链接(div)与图像背景挂起时,我想制作缩放效果.

当我想要缩放背景而不是文字时,我不知道该怎么做!我找不到最好的方法.

这是一个代码(不能正常工作):

.light_blue {
  display: block;
  color: #fff;
  background-repeat: no-repeat;
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  background-position: center;
  width: 100%;
}
a.light_blue:hover {
  text-decoration: none;
  color: #fcb428;
}
div.wrap {
  height: 33%;
  width: 33%;
  overflow: hidden;
  position: relative;
}
.wrap {
  -moz-transition: all .5s;
  -webkit-transition: all .8s;
  transition: all .8s;
  background-position: center center;
}
.wrap:hover {
  -webkit-background-size: 120%;
  -moz-background-size: 120%;
  -o-background-size: 120%;
  background-size: 120%;
}
.bg_flat {
  position: absolute;
  font-family: "Archivo Narrow";
  background: url(http://hokejfan.pl/hokej2015/kluby/img/black_bg4.png);
  background-size: contain;
  bottom: …

这条线在CSS中意味着什么？

#ffffff url(https://cloud.githubusercontent.com/assets/1830348/15354890/1442159a-1cf0-11e6-92b1-b861dadf1750.jpg) no-repeat center center / cover

我想弄清楚.在W3S中它说下面的结构,但我似乎无法看到'/'和其他属性如何匹配这个结构.

background: bg-color bg-image position/bg-size bg-repeat bg-origin bg-clip bg-attachment initial|inherit;

我正在尝试实现全屏无限滚动背景效果，它必须延伸到视口的整个高度和宽度。

这是演示。

我尝试过的解决方案是采用一个具有100vh和100vw视口的包装元素，然后div在其中放置 2 s，其高度为 100%，具有相同的背景图像和background-size: cover属性。我使用的图像的大小是：1,920px \xc3\x97 808px。

然后我在包装元素上应用了以下动画：

@keyframes infiniteScrollBg {\n  0% {\n    transform: translateY(0%);\n  }\n  100%{\n    transform: translateY(-100%);\n  }\n}\n

但问题是，在某些视口尺寸上，图像无法正确重复（由于background-size: cover属性）：

。

这是我尝试过的完整代码：

<div class="animated-scene">\n    <div class="animated-scene__frame animated-scene__frame-1"></div>\n    <div class="animated-scene__frame animated-scene__frame-2"></div>\n</div>\n

和CSS：

.animated-scene {\n    width: 100vw;\n    height: 100vh;\n    position: fixed;\n    min-height: 400px;\n    animation: infiniteScrollBg 50s linear infinite;\n }\n\n .animated-scene__frame {\n     width: 100%;\n     height: …

我有一个我正在使用的精灵，我想重用精灵中的一个图像，但大小只有一半，所以我想如果我只使用background-size:50%;它，它会将背景大小调整 50%，但它似乎将大小缩小了 50%一些理由：

.test {
  background: url(https://i.stack.imgur.com/KaIav.png) left top no-repeat;
  width: 112px;
  height: 112px;
  border: 1px solid red;
}

.test.half-size {
  width: 56px;
  height: 56px;
  background-size: 50%;
}

<div class="test"></div>
<div class="test half-size"></div>

现在我可以通过将背景大小设置为 113% 来解决这个问题：

.test {
  background: url(https://i.stack.imgur.com/KaIav.png) left top no-repeat;
  width: 112px;
  height: 112px;
  border: 1px solid red;
}

.test.half-size {
  width: 56px;
  height: 56px;
  background-size: 113%;
}

<div class="test"></div>
<div class="test half-size"></div>

但是为什么background-size当图像小于原始图像时大于 100%？

在弄清楚如何调整精灵大小时，是否可以应用一组计算？

我有一个#div具有以下 CSS 样式的元素：

width: 413px;
height: 140px;
background-image: url("URL-TO-IMAGE");
background-color: #53A7E7;
background-size: cover;
background-position: center;
background-repeat: no-repeat;

结果如下：

正如您在元素的左侧和底部看到的那样，有两条蓝线（颜色对应于代码#53A7E7）。

如果我删除样式，background-size: cover;两条线都会消失，图像会覆盖元素的整个表面。

知道如何解决这个问题吗？

原始图像的尺寸为 1779x683 像素，但我希望它可以针对任何图像尺寸进行修复。

width: 413px;
height: 140px;
background-image: url("URL-TO-IMAGE");
background-color: #53A7E7;
background-size: cover;
background-position: center;
background-repeat: no-repeat;

#div {
    width: 413px;
    height: 140px;
    background-image: url("https://i.stack.imgur.com/SvWWN.png");
    background-color: #53A7E7;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
}

举个例子：

html {
    height: 100%;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    height: 100%;
    margin: 0;
}

#main {
    background: #222222;
    position: relative;
    flex: 640px 0 0;
    height: 360px;
}

@keyframes stars {
	0% {
        background-position: 0 0;
    }
	100% {
        background-position: -100% 0;
    }
}

#stars {
    animation: stars 10s linear infinite;
    background-image: url('https://i.imgur.com/nyFndCj.png');
    background-size: 100% 100%;
    background-repeat: repeat repeat;
    position: absolute;
    width: 100%;
    height: 100%;
}

<div id="main">
  <div id="stars"></div>
</div>

这里的想法是通过使用百分比更改背景位置来动画星星从一侧移动到另一侧。例如，我可以使用 …