需要一个元素来创建一个能够响应的背景图像

-1

到目前为止，我已经能够大多使用CSS3为渐变等元素设置样式了。现在我已经达到了某个样式不能完全完成的点我想如何重新创建它：http://oi40.tinypic.com/de8svm.jpg 需要一个元素来创建一个能够响应的背景图像

所以我使用该图像作为div的背景图像。现在的问题是，使用background-size:100%属性和值，当然允许图像拉伸，但它也略微移动它的位置，并变得有点模糊。我希望图像能够调整大小并保持其位置，尽管我认为这样的事情可能是不可能的。我想知道什么是最好的方式去做这件事将是接近我想要的。

来源

2013-10-19 Brandon

对于它的价值，他是一个半紧密CSS3的解决方案。这不是完美的，但如果你想使用它，感觉自由。 http://codepen.io/bbuck/pen/DKlvb –

嘿，谢谢很多人。它会做的。 – Brandon

我想你可能会有点仓促驳回CSS ...你应该能够复制，使用这些方针的东西：

.css { 
    width: 98%; 
    height: 13%; 
    background: -webkit-linear-gradient(90deg, #2c3439 0%, #2c3439 50%, #667680 70%, #5d6f7b 100%); 
    border-top-left-radius: 15px 8px; 
    border-top-right-radius: 15px 8px; 
    border-bottom-left-radius: 15px 8px; 
    border-bottom-right-radius: 15px 8px; 
    box-shadow: inset 3px 5px 5px #95aab9, inset -1px -5px 7px #242b2f, 3px 2px 6px #777; 
}

如果您确定您想要去的图像路线，尝试使用类似background-size: contain;的内容来保持图像的高宽比，同时填充容器的至少一个范围。

您可以使用宽度和高度以及填充来使容器尽可能地接近纵横比。

看看这个演示，展示你的形象我的两个CSS版本和background-size属性：

http://jsfiddle.net/GfEA7/

来源

2013-10-19 03:20:19

1+应该是被接受的答案。 –

我同意，希望我先看过这个。非常感谢乔希。 – Brandon

您的形象不失质量。它看起来不同，有时更加模糊，因为宽高比正在改变。为防止这种情况发生，您可以允许用户一次只更改高度或宽度，但不能同时更改高度或宽度。

当用户更改高度时，会自动调整宽度以保持当前宽高比。当用户改变宽度时，高度会自动调整。

来源

2013-10-19 03:11:27

我正在尝试background-size：100％27px;所以高度设置。任何方式来做这样的事情，而不失去长宽比或没有丢失长宽比的影响？ – Brandon

需要一个元素来创建一个能够响应的背景图像

回答

相关问题