-1

到目前为止，我已经能够使用 CSS3 为渐变等元素设置样式。我现在已经达到了某种样式无法完全按照我想要重新创建的方式完成的地步：

所以我使用该图像作为 div 的背景图像。现在的问题是，使用background-size:100%属性和值，当然可以拉伸图像，但它也会稍微移动它的位置并变得有点模糊。我希望图像能够调整大小并保持在其位置，同时又不会损失太多质量，尽管我认为这样的事情可能是不可能的。我想知道解决这个问题的最佳方法是接近我想要的。

4

2 回答 2

2

我认为您可能有点草率地忽略 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-19T03:20:19.210 回答
0

您的图像质量不会下降。由于纵横比正在改变，它看起来不同，有时更模糊。为了防止这种情况发生，您可以允许用户一次只更改高度或宽度，但不能同时更改两者。

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

于 2013-10-19T03:11:27.197 回答